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.

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

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;
}

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');
    });
});

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.
29 comments

Leave a Reply

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

*
*