Bootstrap 3 Second Level Menu Nav

The current version of Bootstrap (3) does not include a Second Level Menu Nav. This is one of the features designers and clients tend to request.

Check out the Demo in CodePen.

bootstrap-second–level-menu

Here’s how to add this feature to your project:

HTML

A regular out of the box navbar taken from the Bootstrap Docs, just add an other list element with the proper dropdown-submenu and dropdown-menu classes.

CSS

The CSS is very straight forward, no fancy styling. This multilevel dropdown should work in all major browsers.

Optional jQuery

I found that once you hover the second level with the mouse the first level loses the hover effect. In some designs you might want to keep it highlighted. Here’s how you can achieve that effect using jQuery:

Mobile / Responsive

The navigation will continue to work on mobile as expected. The only thing you’ll have to do is decide how do you want to show the second level on mobile. That’s up to you, happy coding!

29 comments

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*