How to implement boostrap dropdown menu in wordpress theme development

How to Add Bootstrap DropDown Menu in wp_nav_menu()

Are you developing a WordPress theme based on the bootstrap framework? One of the complexities that face bootstrap WordPress theme developers is how to integrate the drop-down menu in the wp_nav_menu().

This article is going to illustrate a step by step method on how to integrate the dropdown menu in the WordPress theme development using the Bootstrap framework.

Please note, you can still hard-code your drop-down menu taking care of mobile users, but If you don’t have that time, you can still implement the bootstrap 4 dropdown menu during the theme development.

How to Implement Boostrap 4 Dropdown Menu in WordPress Theme Development

To implement the bootstrap drop-down menu in WordPress, we are going to use a custom Walker Class. There are so many free walker classes you can use from GitHub, for this tutorial, we are going to use wp-bootstrap-navwalker.

Download the wp-bootstrap-navwalker class from the Github and add it in your theme files, then include it in your functions.php file as shown in the code below.

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';


Finally, implement the boostrap dropdown menu into WordPress using the following code

          'theme_location' =>  'top-menu',
          'depth'	          => 2, 
          'menu_class' => 'nav navbar-nav mr-auto',
          "container" => false, 
          'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
          'walker' => new WP_Bootstrap_Navwalker()


This walker class supports menu up to two levels, just as bootstrap does, in your wp_nav_menu, you must include depth => 2, failure to which the dropdown won’t show up.

AdBlock Detected!
This site depends on revenue from ad impressions to survive. If you find this site valuable, please consider disabling your ad blocker or pausing Adblock for this website.