Devin Walker is a San Diego based entrepreneur, developer and designer.

How to Implement Twitter Bootstrap Multi-level Dropdown Menus

Posted on Jun 28, 2012 in Web Development | 18 Comments

I love building websites using Twitter Bootstrap. Recently, one of my clients requested multi-level menus implemented on their website. At first I thought, no problem… Bootstrap has that out-of-the-box. Unfortunately, after looking a bit through the features it’s not there.

Finding a Solution

I thought there were enough people using Bootstrap that this issue must have cropped up somewhere before. I turned to Google and found a number of interesting results. First I found that the developers heading up Twitter Bootstrap aren’t too keen on adding this functionality. As seen on this issue on GitHub:

Not right now. I’m not convinced levels and levels of dropdowns are an ideal situation on any site or application.

-Mark Otto

This post on Stack Overflow helped me find the solution I share with you:

The Solution

First check out this Fiddle demonstrating Twitter Multi-level Menus in action.

The following is the CSS used to create Twitter Bootstrap multi-level menus. Copy-and-paste this to your app/website’s CSS:

If You Are Using the WordPress Roots Theme

The WordPress theme framework Roots is a great way to develop with Twitter Bootstrap. I use it all the time. If you’re trying to setup multi-level menus with this framework you may notice that your menus are not display more than 2-levels deep. We’ll have to do a small bit of hackery on the theme:

In your root theme folder open up /inc/cleanup.php and go to line 599 (as of this posting)

No head over to your website and refresh and you’ll see now that roots supports mult-level menus. But wait, if you’re using the CSS above the class names are different than within Roots. Here’s the CSS I used to enable multi-level menus using the framework:

Simple Twitter Bootstrap Hover Menus

Updated 10/4/12 – After receiving @Aj’s comment below that the solution proposed in this article only supported the ‘old’ Twitter Bootstrap code I had to provide updated code that works for the new Twitter Bootstrap dropdowns. Pop this into your CSS stylesheet to have hover dropdowns using Twitter Bootstrap version 2.1+

Please note: I only tested this with 3-levels deep. Also, thanks for this post on WP Anwsers.

Hope this helps you guys out!

18 Comments

  1. Billy
    August 16, 2012

    Thank you so much, was struggling with this. Great post!

  2. Aj Banda
    October 2, 2012

    thanks for this.. it does work on old version of bootstrap.. but is there a way to make it top position dynamic? it seems that the submenu is always on the same height as the main menu… thanks.

    • Aj Banda
      October 2, 2012

      i mean “its top position”.. sorry for the typo

  3. Bootstrap Links, Extensions, & Resources | WPings
    November 30, 2012

    […] Multi-Level Dropdowns […]

  4. Bootstrap: 10 gute Gründe für das Open Source Framework von Twitter | tutorialbox.de
    January 13, 2013

    […] Keine Klassen oder Funktionen für Multi-Level-Menüs integriert (Ein Lösungsbeispiel) […]

  5. ginanjar
    January 14, 2013

    Great.. Thanks for sharing

  6. wouerner
    January 17, 2013

    Gosteiiii

  7. Pavel Kucherbaev
    February 23, 2013

    The code did not work properly, so I would suggest this css:
    ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
    }
    .dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    }
    .dropdown-menu li:hover > .sub-menu {
    visibility: visible;
    display: block;
    }
    .navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
    }
    .navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
    }

    Plus this Javascript:
    $(document).ready(function(){
    $(‘.dropdown-menu li’).hover(function(){ var pos=$(this).position(); $(this).children(‘.sub-menu’).css(‘top’,pos.top-8); });
    });

    Do not forget to have jquery connected before.

  8. Fabiano Monte
    March 5, 2013

    Very good your tutorial, but in fact the solution is not “MULTI-LEVEL” because it only holds a maximum of two multi levels and not as the solution to the JMenu (http://demos.myjqueryplugins.com/jmenu/). With it is possible to create infinite in a multi-level menu.

  9. Павел Медведев
    May 12, 2013

    For all those struglin and tryin to get this working with multi-level menus – you just need to add 1 single sign. This:

    .dropdown-menu li:hover .dropdown-menu {
    visibility: visible;
    display: block;
    }
    gota be this:
    .dropdown-menu li:hover > .dropdown-menu {
    visibility: visible;
    display: block;
    }

    The > sign added means that the code that follows applies only to signle direct child, not all of them.

    If any1 got problems implemending this within wordpress code – write here, i might be able to help.

    • Andrea Larosa
      November 12, 2013

      FUCK YES! Thanks a lot!!

    • Alex
      April 12, 2015

      Thanks, after hours of searching and trying this solved it! Thank you!

  10. Laura Mitchell
    June 24, 2013

    Thank you, Devin!!! So helpful! 🙂

  11. zhuqling
    July 4, 2013

    That is a problem position not like normal menu, sub menu shoud locate with current select row position, I fix it at
    http://jsfiddle.net/zhuqling/jcpJN/2/

  12. Ijimero
    July 10, 2013

    Is there a way for to the dropdown NOT to disappear when you click on the “parent” menu of the submenu?

  13. Akaruz
    July 21, 2013

    Click – Hover Bug Fixed.
    Search Code In CSS:
    ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
    }
    Change:
    .dropdown-menu .sub-menu ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
    }

  14. KyleHayhurst
    October 5, 2013

    I have a working example of a twitter bootstrap infinite menu on my blog, all source is included too.
    http://www.jimsider.com/twitter-bootstrap-infinite-menu-associative-array-edition/

  15. Conor McK
    May 27, 2014

    Thanks for this… works well. If you want it to work for a click:

    $(“.dropdown-menu li”).on(“click”,function(){
    $(this).children(“.dropdown-menu”).css({
    “display”:”block”,
    “visibility”:”visible”
    });
    });

    This is all the CSS you need then:

    .dropdown-menu .sub-menu {
    visibility: hidden;
    }