alexweblab / bootstrap-5-wordpress-navbar-walker

Bootstrap 5 WordPress navbar walker menu.

Bootstrap 5 WordPress navbar walker menu

bootstrap-5-wordpress-navbar-walker

How to use:

1. Copy and paste the bootstrap_5_wp_nav_menu_walker class into the functions.php file of your theme;
2. Register a new menu by adding the follow code into the functions.php file of your theme:

register_nav_menu('main-menu', 'Main menu');

3. Add the following html code in your header.php file or wherever you want to place your menu:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        
        <div class="collapse navbar-collapse" id="main-menu">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'main-menu',
                'container' => false,
                'menu_class' => '',
                'fallback_cb' => '__return_false',
                'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                'depth' => 2,
                'walker' => new bootstrap_5_wp_nav_menu_walker()
            ));
            ?>
        </div>
    </div>
</nav>

v1.3.0 Added support for dropdown menu (responsive) alignment: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment

Here is how it works:

• From Appearance -> Menus page of WordPress, check the CSS Classes checkbox under Screen Options;
• Add a Custom Link with "#" in the URL field (this would be the parent of your dropdown);
• On the CSS Classes field add any of the following alignment classes: 'dropdown-menu-start', 'dropdown-menu-end', 'dropdown-menu-sm-start', 'dropdown-menu-sm-end', 'dropdown-menu-md-start', 'dropdown-menu-md-end', 'dropdown-menu-lg-start', 'dropdown-menu-lg-end', 'dropdown-menu-xl-start', 'dropdown-menu-xl-end', 'dropdown-menu-xxl-start', 'dropdown-menu-xxl-end';
• If any of the mentioned above class is detected, then they will automatically copied into the ul.dropdown-menu element following the Bootstrap 5 structure;
• Any other class that is not related to the dropdown menu alignment will stay where it is.

bootstrap-5-wordpress-navbar-walker's Issues

depth = 3 seems not to work

Hi, I've created sub-sub menu but depth = 3 doesn't seem to work. Menu items appear in HTML.

Bootstrap 5.1.3

Howdy, I'm using the latest version of Bootstrap (5.1.3) and get the error "ParseError thrown / syntax error, unexpected '<', expecting end of file" when trying to use bootstrap-5-wordpress-navbar-walker

Is Bootstrap 5.3.1 supported or should I use another version?

Thanks for your time.

In Dropdown Menu parent element is not clickable

Thanks!

active to current-post-ancestor and current_page_parent?

Hello Alex,

thank you very much for this awesome nav-walker.

Is it possible to add .active class to following parent items?

1. current-post-ancestor (highlight category link in navbar if a post in this category is viewed)
2. current_page_parent (highlight shop link if product is viewed)

And I do not see a license here. Can you add a license that we can use this nav-walker safely?

Thank you and best regards

Basti

For Smartphone hamburger not found

For small screens the hamburger that should display the menu doesn't work.. have a solution?

Navbar also works with mouseover?

Don't know if this is a valid question but I would like to have the submenu's opening on mouseover instead of a click. Is this configurable somewhere? Or do I need to use a different bootstrap menu?

Multiple menu items are being highlighted as current page

First, I would like thank you for this amazing contribution! Without it I would be lost :)

Issue:

When the menu item for a custom post type archive (archive-karriar.php) is active, then also the blog menu item (home.php or index.php - which ever used) is hi-lighted as the current menu item.

Strange thing is, this does not happen the other way around - when home.php or index.php menu item is active, the cpt archive is not hi-lighted as current page. Other than that the walker i working flawlessly.

I'm using

• Wordpres 5.8
• Bootstrap 5.1

This is the code I'm currently using in header.php:

<nav id="main-nav" class="navbar navbar-expand-lg fixed-top navbar-light bg-light" aria-labelledby="main-nav-label">

  <div class="container-fluid">
    <a class="navbar-brand" href="<?php echo site_url(); ?>">
      <img src="<?php echo get_theme_file_uri('/img/logo.svg'); ?>" alt="" class="custom-logo">
    </a>

    <button class="hamburger hamburger--squeeze" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>

    <div class="collapse navbar-collapse" id="main-menu">
      <?php
      wp_nav_menu(array(
        'theme_location' => 'main-menu',
        'container' => false,
        'menu_class' => '',
        'fallback_cb' => '__return_false',
        'items_wrap' => '<ul id="%1$s" class="navbar-nav ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
        'depth' => 2,
        'walker' => new bootstrap_5_wp_nav_menu_walker()
      ));
      ?>
    </div>
  </div>
</nav>

I'm not sure what else info you would need, but if something is missing just let me know. Thnx!

Dropdown ul has inline style css

I'm new to wp walkers, and I'm not sure if this is an issue with this code, but I thought I'd ask. I'm working on completing a custom WordPress theme built on BS-5 that I was handed but it didn't have dropdown support for WP menus. That's where I found your code to add to my sidebar. I copied your function code directly into my functions.php and below is in my sidebar.php file.
<?php wp_nav_menu(array( 'theme_location' => 'left-column-menu', 'container' => false, 'menu_class' => '', 'fallback_cb' => '__return_false', 'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>', 'depth' => 2, 'walker' => new bootstrap_5_wp_nav_menu_walker() )); ?>

The code works and creates dropdowns, however, when I click the dropdown, I see an inline style tag and javascript "data-popper-placement" tag that displays within the 2nd level ul tag like this
<ul class="dropdown-menu depth_0 show" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 48px);" data-popper-placement="bottom-start">

I can't find where this code is coming from that inserts this inline style CSS but I need to remove it because it displays poorly on the page. Could you point me in the direction to remove this style?

Any help would be much appreciated.

Anchor tag navigation issue on single page websites - with Hamburger

Hi Alex, I've run into a problem today.

When clicking on an anchor link to navigate to a specific section within the single-page website, the page scrolls to that section but then immediately bounces back to the top. This happens when you're using Hamburger menu to navigate.

Website Link: https://cicos.digitalplayers.website/

how to add naavbar button shutdown?

Navbar accessibility using keyboard navigation for dropdown (tab and shift+tab)

Hi there,

How can I achieve to navigation on the dropdown menu using tab and shift+tab ?? Now, It's opening after clicking on the submenu item. But I want to show it when someone focus on the dropdown toggle.

do not work sub menu in depth 3

do not work sub menu in depth 3.
what's the solution?

Validation Error

Hi,

First of all thanks for the nice walker. I have used it in my WordPress theme and when I went to validate my site it gets validation error duplicate attributes. That is why it I came here to let you know.

When your menu depth is higher than 0 then it will get validation error.

Best Regards

Dropdown

Show 3rd level items under 2nd level

I use for 2 level menu, all is fine. But when I use the 3 level menu, the menu on the third level doesn't appear, but the elements are visible when inspected. And I changed the depth to 3, but it doesn't show up either.
Can anyone help me?

Adding custom classes to the Anchor elements

In my use case I need to be able to add custom classes to the anchor elements created by wp_nav_menu .
To do so, I have a hook filter that should be called on nav_menu_link_attributes.
The problem is that bootstrap_5_wp_nav_menu_walker appears to never call nav_menu_link_attributes, so this does not work. Can this be added ?

I have another similar filter for nav_menu_css_class (used to add classes to the li elements), which works fine (I guess because nav_menu_css_class is actually called in bootstrap_5_wp_nav_menu_walker).

Thanks

Is the version 1.3.4 of this navbar walker compatible with Boostrap 5.3.2 ?

Hi,

I would like to use this tool for my current web project
Is the latest version (v. 1.3.4) of this navbar walker fully compatible with Boostrap 5.3.2 ?

Let me know, thanks
Best regards,
Letizia

Clickable parent

Is i possible to make the parent stay clickable when having children items?

Is this walker embeddable in other projects?

Hi, I was looking for a Bootstrap 5 nav walker and I stumbled in this library of yours.

I've created a WordPress starter theme that natively integrates Bootstrap, and I'm currently migrating it from BS v.4 to v.5.

I was wondering if it would be possible for me to test your walker and see if it could be embedded in my project. Currently I'm using wp-bootstrap-nav-walker, but it does not support Bootstrap 5, and I'm considering alternatives.

My theme is called Bricks, and it is publicly available as an open-source project.

Submenu/mega-menu support?

Hi, I was wondering if this nav-walker has support for sub-dropdowns and customized stuff like megamenu support?

I would like to accomplish something similar to:

from https://bootstrap-menu.com/demos/megasubmenu.html

But I have only been able to get the single dropdown to work correctly. Specifically, when (in the wp customizer), a sub-link is added (see screenshot), the menu item disappears altogether.

This is the code I am using (in a custom wordpress theme):

  <nav class="navbar navbar-expand-md navbar-light py-3 bg-white">
    <div class="container-fluid col-12 col-md-11 py-2 py-md-0">
      <a class="navbar-brand" href="<?php echo get_option('home'); ?>">
        <?php
        // Get the uploaded logo image
        $custom_logo_id = get_theme_mod('custom_logo');
        $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
        if (has_custom_logo()) {
          echo "<img class='logo' src='";
          echo $logo[0];
          echo "' alt=''>";
        } ?>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse d-md-flex justify-content-md-end" id="main-menu">
        <?php
        wp_nav_menu(array(
          'theme_location' => 'main-menu',
          'container' => false,
          'menu_class' => '',
          'fallback_cb' => '__return_false',
          'items_wrap' => '<ul id="%1$s" class="navbar-nav %2$s">%3$s</ul>',
          'depth' => 5,
          'walker' => new bootstrap_5_wp_nav_menu_walker()
        ));
        ?>
      </div>
    </div>
  </nav>

Sorry if I've overlooked something... and thanks for your time. :)

WordPress standard

Update class according to WordPress standard for Bootstrap 5 WordPress navbar walker menu

JC Submenu not working

Hello

Many thanks for this code.

Would you be able to add support for the JC Submenu plugin please?
For some reason it just doesn't show the submenus when I choose to use your walker nav but it (the JC plugin) works if I use it with the regular Wordpress menu (checked with WordPress 5.7.2).

Link to the plugin:
https://wordpress.org/plugins/jc-submenu/

Thank you!

Level 2 Item not showing if it has children at level 3.

Hello Alex,
Hope you are doing well. I have encountered an issue today.

If you have any 3rd level menu item then it's immediate parent item will not show. To get understand the issue I have attached 2 screenshots. On 2nd screenshot of front-end you can see that, the "Level 2" menu item is not showing because of it has children. "Level 2a" and "Level 2b" are showing properly because of they don't have any children items.

I have fixed the issue already on my side.

Best Regards
Asif

2nd level submenu not working

Hi
Thank you for bootstrap walker update.
When i make 2 level submenu it the submenu at level 0 stops working.
Please help.
Thanks.
Sana

Starter Content Nav Menus

Any insights on why navwalker would not work with starter-content? Removing the navwalker to default to the wp_nav_menu, adding theme support for starter nav menus works where it does not with the walker.

bootstrap-5-wordpress-navbar-walker - is there any support for multilevel menu

Hi @AlexWebLab ,

Thank you for this code. I have implement this code working fine for singe dropdown but when I try to do this multilevel on that time menu ul not generating. Can you help me on this.

How can I add extra classes for dropdown?

I need to add a class to make a dropdown menu become right aligned, as per the Bootstrap instructions: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment

The only way I can set this in Wordpress, is to add a class of 'dropdown-menu-end' to the parent menu item. This needs to be passed through to the dropdown though, but it's not.

How would this be possible to set the alignment of the dropdown menu (aside from CSS hacks)?

Wordpress 5.8

Hi! I am not able to get menu in WP 5.8. Does that work for you?
I see that there were done some changes in new version of wordpress.

Metronic Bootstrap 5 support

Hello,

Many thanks for your great effort.

Please consider potential compatibility with this (accordeon/vertical) bootstrap 5 menu:
https://preview.keenthemes.com/metronic8/demo1/pages/profile/overview.html

That is to say that:
Each parent needs to know if it has children (if not to not display the arrow).
For each opened child to also assess the parents that they belong so that if the child is active the parents to be also "active".

Here is a summary of the code that needs to be produced with a full menu:

<div class="menu menu-column menu-title-gray-800 menu-state-title-primary menu-state-icon-primary menu-state-bullet-primary menu-arrow-gray-500" id="#kt_aside_menu" data-kt-menu="true">		
	<div class="menu-item menu-accordion" data-kt-menu-trigger="click" >
									<span class="menu-link">
										<span class="menu-icon">
											<!--begin::Svg Icon | path: icons/duotone/Code/Compiling.svg-->
											<span class="svg-icon svg-icon-2">
												<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
													<path d="M2.56066017,10.6819805 L4.68198052,8.56066017 C5.26776695,7.97487373 6.21751442,7.97487373 6.80330086,8.56066017 L8.9246212,10.6819805 C9.51040764,11.267767 9.51040764,12.2175144 8.9246212,12.8033009 L6.80330086,14.9246212 C6.21751442,15.5104076 5.26776695,15.5104076 4.68198052,14.9246212 L2.56066017,12.8033009 C1.97487373,12.2175144 1.97487373,11.267767 2.56066017,10.6819805 Z M14.5606602,10.6819805 L16.6819805,8.56066017 C17.267767,7.97487373 18.2175144,7.97487373 18.8033009,8.56066017 L20.9246212,10.6819805 C21.5104076,11.267767 21.5104076,12.2175144 20.9246212,12.8033009 L18.8033009,14.9246212 C18.2175144,15.5104076 17.267767,15.5104076 16.6819805,14.9246212 L14.5606602,12.8033009 C13.9748737,12.2175144 13.9748737,11.267767 14.5606602,10.6819805 Z" fill="#000000" opacity="0.3" />
													<path d="M8.56066017,16.6819805 L10.6819805,14.5606602 C11.267767,13.9748737 12.2175144,13.9748737 12.8033009,14.5606602 L14.9246212,16.6819805 C15.5104076,17.267767 15.5104076,18.2175144 14.9246212,18.8033009 L12.8033009,20.9246212 C12.2175144,21.5104076 11.267767,21.5104076 10.6819805,20.9246212 L8.56066017,18.8033009 C7.97487373,18.2175144 7.97487373,17.267767 8.56066017,16.6819805 Z M8.56066017,4.68198052 L10.6819805,2.56066017 C11.267767,1.97487373 12.2175144,1.97487373 12.8033009,2.56066017 L14.9246212,4.68198052 C15.5104076,5.26776695 15.5104076,6.21751442 14.9246212,6.80330086 L12.8033009,8.9246212 C12.2175144,9.51040764 11.267767,9.51040764 10.6819805,8.9246212 L8.56066017,6.80330086 C7.97487373,6.21751442 7.97487373,5.26776695 8.56066017,4.68198052 Z" fill="#000000" />
												</svg>
											</span>
											<!--end::Svg Icon-->
										</span>
										<span class="menu-title">By Provider</span>
										<span class="menu-arrow"></span>
									</span>
									<div class="menu-sub menu-sub-accordion menu-active-bg">
										<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
											<span class="menu-link">
												<span class="menu-bullet">
													<span class="bullet bullet-dot"></span>
												</span>
												<span class="menu-title">Microsoft</span>
												<span class="menu-arrow"></span>
											</span>
											<div class="menu-sub menu-sub-accordion menu-active-bg">
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/overview.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">Overview</span>
													</a>
												</div>
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/projects.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">By Application</span>
													</a>
												</div>
											</div>
										</div>
										<div data-kt-menu-trigger="click" class="menu-item menu-accordion">
											<span class="menu-link">
												<span class="menu-bullet">
													<span class="bullet bullet-dot"></span>
												</span>
												<span class="menu-title">ERP</span>
												<span class="menu-arrow"></span>
											</span>
											<div class="menu-sub menu-sub-accordion menu-active-bg">
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/overview.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">Overview</span>
													</a>
												</div>
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/projects.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">By Application</span>
													</a>
												</div>
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/campaigns.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">By User Group</span>
													</a>
												</div>
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/documents.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">By User</span>
													</a>
												</div>
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/connections.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">By Activity</span>
													</a>
												</div>
												<div class="menu-item">
													<a class="menu-link" href="pages/profile/activity.html">
														<span class="menu-bullet">
															<span class="bullet bullet-dot"></span>
														</span>
														<span class="menu-title">By Behaviour</span>
													</a>
												</div>
											</div>
										</div>
										<!--end::Menu-->
									</div>

Special Character Output / Encoding Issue