How to Implement Twitter Bootstrap Multi-level Dropdown Menus

Posted on
18 Comments

Please note that the information in this post may no longer be accurate or up to date. I recommend checking more recent posts or official documentation for the most current information on this topic. This post has not been updated and is being kept for archival purposes.

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:

/* MULTI-LEVEL DROPDOWNS FOR BOOTSTRAP */
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

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

 

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)

  if ($args['walker'] == new Roots_Navbar_Nav_Walker()) {
    $roots_nav_menu_args['depth'] = 5;  //UPDATE THIS TO DESIRED DEPTH LEVEL
  }

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:

/* MULTI-LEVEL DROPDOWNS FOR ROOTS */
.dropdown-menu .dropdown-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .dropdown-menu {
    visibility: visible;
    display: block;
}

.navbar .dropdown-menu  .dropdown-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 .dropdown-menu .dropdown-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;
}

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+

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;
}

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

Hope this helps you guys out!

Discover more from Devin.org

Subscribe to get the latest posts sent to your email.

18 Comments

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

  3. Pingback: Bootstrap Links, Extensions, & Resources | WPings
  4. Pingback: Bootstrap: 10 gute Gründe für das Open Source Framework von Twitter | tutorialbox.de

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

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

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

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

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

Comments are closed.