Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit

Add active class to "current_page_parent" and "current-post-ancestor"

Git stats


Failed to load latest commit information.
Latest commit message
Commit time
December 18, 2020 14:52
May 31, 2021 11:04

Bootstrap 5 WordPress navbar walker menu


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');
  1. 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>
        <div class="collapse navbar-collapse" id="main-menu">
                '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()

v1.3.0 Added support for dropdown menu (responsive) 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.