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.

CSS

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!

Tags:

29 Responses to “Bootstrap 3 Second Level Menu Nav”

  1. rex February 6, 2015 at 9:49 pm #

    Thanks

    • Rick February 26, 2015 at 9:01 pm #

      You’re welcome.

  2. Scott Wissler April 3, 2015 at 5:58 am #

    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?

    • Rick April 4, 2015 at 7:34 pm #

      Well, of course. The three basic: HTML, CSS and JS 😉

  3. Trevor December 15, 2015 at 9:18 pm #

    No sample? Stupid article, start putting samples up idiot.

    • Rick December 16, 2015 at 9:21 am #

      The code is there Trevor, what’s the issue?

      • enli December 24, 2015 at 11:56 am #

        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.

      • Rick December 30, 2015 at 6:27 pm #

        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.

  4. Martin February 7, 2016 at 8:10 pm #

    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!

    • Rick February 8, 2016 at 7:19 pm #

      Could you prepare a demo with your example? I can’t seem to fully understand the issue.

      • Martin February 8, 2016 at 8:11 pm #

        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

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

      • Rick February 9, 2016 at 1:25 pm #

        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.

      • Martin February 9, 2016 at 1:45 pm #

        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.

      • Rick February 9, 2016 at 3:28 pm #

        I see. Have you tried overwriting with !important ?

      • Martin February 9, 2016 at 3:36 pm #

        Yes, I did…

  5. Timothy July 24, 2016 at 3:11 am #

    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?

  6. Christopher Frelin August 15, 2016 at 4:58 pm #

    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?

  7. Christopher Frelin August 15, 2016 at 4:59 pm #

    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?

  8. Kyle September 18, 2016 at 9:24 pm #

    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?

    • Rick September 19, 2016 at 2:19 pm #

      We can rule out it has anything to do with the code above.

      Make sure you have included the JavaScript from Bootstrap.

      Regards

  9. James Spears October 25, 2016 at 8:27 pm #

    Thank you very much, this was just what I needed.
    –James.

    • Rick October 25, 2016 at 10:47 pm #

      You’re welcome James!

  10. Magme December 4, 2016 at 9:52 am #

    Very helpful and simple. Thanks!

  11. Stefano April 26, 2017 at 10:54 pm #

    Thank you very much Rick, it worked for me!

    • Rick April 27, 2017 at 9:05 am #

      You’re welcome!

  12. Lexo July 22, 2017 at 11:43 pm #

    Fantastic! Worked like a charm. Thanks.

  13. Stephen October 7, 2017 at 10:21 am #

    Brilliant, thank you!

    • Rick October 7, 2017 at 7:07 pm #

      Glad it worked for you!

Leave a Reply

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