Creating navbar in Bootstrap with multiple child level menus

The navbar sub menus

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.

This is just 1Kb of the file for CSS and 1Kb for JavaScript that you need to include and refer the caret-right class; I will show you how with live examples.

An example of creating three level dropdowns/children menu

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:

Bootstrap navbar multiple children

See online demo and code

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=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

<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”>

<script src=”js/navbar.js”></script>

These are only 1 KB files.

In the markup section, you have to use the caret-right class on children dropdowns. For example:

 

See the complete code at the demo page.

Overriding the CSS classes for custom look of navbar

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:

Bootstrap navbar sub menu

See online demo and code

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