wp-bootstrap
How to change navwalker's dropdown mark-up?
I am using Bootstrap 4 Navwalker to step through my WordPress menu items and generate a navbar, like...
Single level - works
<?php
wp_nav_menu([
'menu' => 'primary',
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'sidebar-nav',
'menu_id' => 'sidebarnav',
'depth' => 2,
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
]);
?>
This correctly generates a navbar like ...
<nav class="sidebar-nav">
<ul id="sidebarnav" class="menu">
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3 nav-item active">
<a title="Home Page" target="_blank" href="/" class="nav-link active" aria-expanded="false">
<i class="icon-speedometer"></i>Home Page
</a>
</li>
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4 nav-item">
<a title="Example Page" target="_blank" href="http://example.com/" class="nav-link" aria-expanded="false">
<i class="ti-layout-grid2"></i>Example Page
</a>
</li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5 nav-item">
<a title="Custom Page" target="_blank" href="http://example.com/custom/" class="nav-link" aria-expanded="false">
<i class="ti-palette"></i>Custom Page
</a>
</li>
</ul>
</nav>
Multi-level - preferred
The problem happens when it comes to drop-down/sub-menu items...
My theme handles those like this...
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="selected">
<a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
<i class="icon-speedometer"></i>
<span class="hide-menu">
Dashboard <span class="badge badge-pill badge-cyan">4</span>
</span>
</a>
<ul aria-expanded="false" class="collapse">
<li><a href="index.html">Minimal</a></li>
<li><a href="index2.html">Analytical</a></li>
<li><a href="index3.html">Demographical</a></li>
<li class="active"><a href="index4.html" class="active">Modern</a></li>
<li><a href="index5.html">Cryptocurrency</a></li>
</ul>
</li>
<li>
<a class="has-arrow waves-effect waves-dark" href="javascript:void(0)" aria-expanded="false">
<i class="ti-layout-grid2"></i>
<span class="hide-menu">Apps</span>
</a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-calendar.html">Calendar</a></li>
<li><a href="app-chat.html">Chat app</a></li>
<li><a href="app-ticket.html">Support Ticket</a></li>
<li><a href="app-contact.html">Contact / Employee</a></li>
<li><a href="app-contact2.html">Contact Grid</a></li>
<li><a href="app-contact-detail.html">Contact Detail</a></li>
<li><a href="javascript:void(0)" class="has-arrow">Inbox</a>
<ul aria-expanded="false" class="collapse">
<li><a href="app-email.html">Mailbox</a></li>
<li><a href="app-email-detail.html">Mailbox Detail</a></li>
<li><a href="app-compose.html">Compose Mail</a></li>
</ul>
</li>
</ul>
</li>
</nav>
... That is, it:
- adds a
<span>with.hide-menuinside the top-level link<a> - adds an
<ul>unordered list afterward.
This is the approach I want to stick to.
Multi-level: what navwalker gives
However, when using the navwalker, I get...
<nav class="sidebar-nav">
<ul id="sidebarnav" class="menu">
<li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-3 nav-item dropdown active">
<a title="Home Page" target="_blank" href="/" class="nav-link dropdown-toggle active" data-toggle="dropdown" aria-expanded="false">
<i class="icon-speedometer"></i>Home Page</a>
<div class="dropdown-menu">
<a href="/sample-page/" class="dropdown-item" aria-expanded="false"><i class="ti-palette"></i>Sample Page</a>
</div>
</li>
...
</ul>
</nav>
That is, it...
- places a
<div>with.dropdown-menuinside the<a>, instead of a<span>with.hide-menu - for the sub-menu items, uses
<a>elements
I'm sure this is standard Bootstrap 4 behaviour - in fact, I have happily used it this way on a different site. However, it's not what is needed by the Bootstrap 4 theme which I have purchased and am currently trying to turn in to a WordPress theme...
The question
How can I use the navwalker but in a way that will present drop-down/sub-menu items in a manner consistent with my theme... ?
Hey @robertandrews,
I know it's been a very long time since you posted this and I am sorry for not getting around to responding. In it's current state the navwalker doesn't handle the situation you need very well (at all really) but I have been looking into adding filters/toggles for changing the markup here and plan to work on the updated walker very soon.
I realise this has come around much too late for your needs but I am going to work on something similar to this in the coming weeks and may use this issue to track some progress.
Thanks for opening this issue and I do hope you were able to get a solution for it back at the time.
Hi @pattonwebz - thanks for the reply :-) I did not go ahead with implementing that specific theme and am currently building my own, which is essentially nothing much on top of Bootstrap 4. I can't recall the specifics of my post, so not sure whether this was edge case for you anyway or something that would have been a useful inclusion.
Currently running https://github.com/dupkey/bs4navwalker during the build - maybe I should give this one a try, too. Thanks for responding.