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.
My name is Benson Karue, I was Software Engineer Telenet Co LTD before I quit and joined YouTube and Udemy as an instructor. I have real-world software experience and have a Bachelor’s degree in Mathematics and Computer Science with 6+ years of coding experience and winning several competitions and coding challenges.