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

wp_nav_menu(array(
          '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.