How to build this menu in WordPress

<div class="collapse navbar-collapse" id="collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">our story</a></li>
                    <li><a href="#">our vision</a></li>
                    <li class="dropdown">
                        <a href="#">History</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">History 1</a></li>
                            <li><a href="#">History 2</a></li>
                            <li><a href="#">History 3</a></li>



WordPress Code:

<div class="collapse navbar-collapse" id="collapse-1">

wp_nav_menu( array(
    'theme_location' => 'header',
    'menu_class' => 'nav navbar-nav',
    'fallback_cb' => false
) );


The easiest way to do this is to use an off-the-shelf solution. There is a WP_Bootstrap_Navwalker class which extends WordPress' native Walker_Nav_Menu class and makes your Navigation Menus ready for Bootstrap 3 or 4. Download it from GitHub.

Add it to your theme, then add the following to the functions.php:


Change path-to-the-directory/ to fit your needs.

Next, alter your wp_nav_menu() with the following code:

wp_nav_menu( array(
    'menu'              => 'header', // match name to yours
    'theme_location'    => 'header',
    'container'         => 'div', // no need to wrap `wp_nav_menu` manually
    'container_class'   => 'collapse navbar-collapse',
    'container_id'      => 'collapse-1',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => false,
    'walker'            => new WP_Bootstrap_Navwalker() // Use different Walker

Note, that you don't need the <div class="collapse navbar-collapse" id="collapse-1"> anymore as it will be added by wp_nav_menu() with proper CSS classes and id.

Also, read the WP_Bootstrap_Navwalker README.md file carefully.

  • Do you know if Navwalker is working with bootstrap 5? May 25 at 9:17
  • 1
    @Lars Don't be shy. Google is your friend. 1, 2 and so on.
    – Max Yudin
    May 27 at 7:04

The easiest solution would be to use jquery in this case. You can add a new class in your functions.php file to check if the menu item has children and then add attributes to that item or use bootstrap nav walker as well. Here' I'm going with the easier one.

        $("ul#menuid li.dropdown a").addClass("dropdown-toggle");
        $("ul.sub-menu li a").removeClass("dropdown-toggle"); 
        $('.navbar .dropdown-toggle').append('');
        $('a.dropdown-toggle').attr('data-toggle', 'dropdown');

Just copy it and paste it in your footer.php. For more details http://webtrickshome.com/faq/how-to-add-bootstrap-dropdown-class-in-wordpress-menu-item


you can use Walker_Nav_Menu class if you want to modify the default wordpress menu markup.



Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.