Bootstrap 3 Second Level Menu Nav

⚠️ Looking for Bootstrap v4?

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


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.

<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Link</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Link 1</a></li> <li><a href="#">Lik 2</a></li> <li><a href="#">Link 3</a></li> </ul> </li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </li> <!-- .dropdown --> </ul> <!-- .nav .navbar-nav --> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
Code language: HTML, XML (xml)


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

.dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left>.dropdown-menu { left: -100%; margin-left: 10px; }
Code language: CSS (css)

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:

$(document).ready(function () { // For the Second level Dropdown menu, highlight the parent $(".dropdown-menu") .mouseenter(function () { $(this).parent('li').addClass('active'); }) .mouseleave(function () { $(this).parent('li').removeClass('active'); }); });
Code language: JavaScript (javascript)

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!


View demo

⚠️ Looking for Bootstrap v4?

About Ricard Torres

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

@ricard_dev @ricard_dev

📝 Blog 🎙 Podcast


Leave a Reply

Add <code> Some Code </code> if you need to.