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:
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!
Nice code, thanks!..
You’re welcome José!
Brilliant, thank you!
Glad it worked for you!
Fantastic! Worked like a charm. Thanks.
Thank you very much Rick, it worked for me!
You’re welcome!
Very helpful and simple. Thanks!
Thank you very much, this was just what I needed.
–James.
You’re welcome James!
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?
We can rule out it has anything to do with the code above.
Make sure you have included the JavaScript from Bootstrap.
Regards
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?
You could try to play with the hover and click events.
With jQuery “on” event handler you should be able to disable the default behaviour and do what you like when hover and click
http://api.jquery.com/on/
Also use this: https://api.jquery.com/event.preventdefault/
Regards and sorry for the late response.
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?
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?
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!
Could you prepare a demo with your example? I can’t seem to fully understand the issue.
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?
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.
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.
I see. Have you tried overwriting with !important ?
Yes, I did…
No sample? Stupid article, start putting samples up idiot.
The code is there Trevor, what’s the issue?
You’re right, in my recent posts I tend to create a demo first.
In any case, here’s how it looks: http://codepen.io/anon/pen/BjQqPO
Enjoy.
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.
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?
Well, of course. The three basic: HTML, CSS and JS 😉
Thanks
You’re welcome.