How to Implement Twitter Bootstrap Multi-level Dropdown Menus

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!