In the navbar tutorial of Bootstrap, the menus were created with just one level down by using built-in component.
In certain scenarios, you may need multiple levels of menu, for example, having four levels of categories and sub-categories that you want to reflect in the navigation bar as well.
Don’t like reading text, watch this video
By using a simple add-on, which is available at GitHub website, you may create as many levels as you want while using the Bootstrap navbar plug-in.
In this example, a navigation bar is created by using navbar component of Bootstrap. As you click the third menu item, Web, it will open a dropdown menu. Inside the dropdown, you can see a right arrow with Bootstrap menu item. The second level menu will be opened as you click on it. The second level contains four menu items where the fourth one, Free themes, also contains right arrow. Clicking on it will open its menu as well.
See the demo and code online:
So, how is it done?
First of all, as you are working with Bootstrap framework, I am assuming you have included these libraries:
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=”sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7″ crossorigin=”anonymous”>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” integrity=”sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”></script>
That is, Bootstrap JS and CSS plus jQuery libraries. Apart from that, two other files are also included to deal with child menus:
<link href=”css/navbar.css” rel=”stylesheet”>
These are only 1 KB files.
In the markup section, you have to use the caret-right class on children dropdowns. For example:
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Bootstrap <b class="caret caret-right"></b></a>
<li><a href="https://www.jquery-az.com/bootstrap-tabs-with-default-and-customized-css-4-online-demos/">Bootstrap Tabs</a></li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Free Themes <b class="caret caret-right"></b></a>
<li><a href="https://www.jquery-az.com/choco-bar-free-bootstrap-landing-page-theme/">Choco bar</a></li>
See the complete code at the demo page.
You may use the navbar’s CSS classes for overriding the default look. The process is explained in the navbar component tutorial, for selecting and modifying the classes.
In this example, I will show you changing the look of sub-menus along with the main navbar. First, have a look at a demo which is followed by how you can do it:
The markup section remains the same as in above example. The only change you will notice is the name of JS file of the plug-in, navbar-custom.js. Apart from that, the <style> section is given the navbar properties to override the default style. The property names are same as in framework. Just a few properties are changed to modify the look of the navbar.
In the sub-menu plug-in’s JS file, the jQuery code is written where CSS properties are set. I just added the background CSS property to change the background color of sub-menus.
Credit: @ GitHub