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.

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.

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

CSS

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!

Demo

View demo

⚠️ Looking for Bootstrap v4?

Comments

  1. Ricard,

    First of all… THANK YOU THANK YOU THANK YOU for this. it was very helpful on a project i’m working on. I had one hangup that I can’t figure out. When I copy and paste your code into the native environment I’m working in, the “hamburger” menu button for mobile screens doesn’t do anything upon clicking. I know it’s hard to determine, but do you know of anything that could be causing that?

  2. guess something got stripped out – reiterated comment below. thx

    Firstly- thanks for this elegant and simple solution. Secondly – a question: Is there a way to allow the LIST ITEM that contains the submenu to itself link to a page – perhaps upon a second click, or to work as a clickable link and have the submenu show on hover?

  3. Firstly- thanks for this elegant and simple solution. Secondly – a question: Is there a way to allow the that contains the submenu to itself link to a page – perhaps upon a second click, or to work as a clickable link and have the submenu show on hover?

  4. Hello,
    This is a nice demo! Thank you for posting.
    Question, would you be able to have the drop down menu open on hover as well so you don’t have to click on it to open it up?

  5. Nice additon, thanks. Unfortunately I have found an issue on mobile views: when I add navbar-fixed-top to the navigation, sumenues no longer behave in the same, userfriendly way. The max-height: 340px; of navbar-collapse is blocking it. Have you got an idea how to fix this? Your help is much appreciated!

      1. I have extended your demo in CodePen: http://codepen.io/tinusmile/pen/NxEbyW
        Check it out in debug mode for mobile nav views (< 768px) and open the submenus of the second level. It does not open any more till the last item when navbar-fixed-top is added to nav. The problem is that

        .navbar-fixed-top .navbar-collapse { max-height: 340px; }
        Code language: CSS (css)

        from bootstrap.css (line 4220) is blocking that. Any idea?

      2. Martin,

        My code doesn’t take into account how to “show” the dropdown. There’s no on click / touch event for the third menu, you’d have to code that.

        Nevertheless, when I open your pen and shrink the view I see this:

        Not sure what I’m I missing.

      3. The dropdown only opens for the 340px height what hides the rest of the submenus. Therefore a scrollbar appears what is not very userfriendly compared to your solution without «navbar-fixed-top». So the question is how to override this CSS rule. All I tried did not work properly.

      1. The issue is that we readers may want to see the demo first before starting up the coding related articles. I was particularely interested in seeing the demo but I couldnt see it and then I was not interested in seeing the code snippet anymore.

  6. I am trying to emulate the three level drop down menu seen on intel.com for a website I am working on. What do you think they are using HTML5, CSS3, JS JQuery, Bootstrap? Any or all?

Leave a Reply

Your email address will not be published. Required fields are marked *