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.


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


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.


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!

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

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