Multi-Column Dropdown Menu using Twitter Bootstrap

The other day I came across a problem that required a somewhat custom solution. I had begun using the dropdown menus in Twitter Bootstrap and had some dropdowns that became quite lengthy. They were so long, in fact, some of them stretched right off the viewport without wrapping.

So, I came up with a quick solution to create a multi column bootstrap dropdown, with minimal overrides, that keeps the same look and feel as the other dropdown menus. Without anymore fluff, here is my implementation...


HTML

<ul class="nav">
  <li class="dropdown">
    <a href="#">Dropdown Heading</a>
    <div class="dropdown-menu multi-column">
      <div class="container-fluid">
        <div class="row-fluid">
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 1 - Opt 1</a></li>
              <li><a href="#">Col 1 - Opt 2</a></li>
            </ul>
          </div>
          <div class="span6">
            <ul class="dropdown-menu">
              <li><a href="#">Col 2 - Opt 1</a></li>
              <li><a href="#">Col 2 - Opt 2</a></li>
            lt;/ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

CSS

.dropdown-menu.multi-column {
    width: 400px;
}

.dropdown-menu.multi-column .dropdown-menu {
    display: block !important;
    position: static !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

I've currently only used this with a standard nav in Bootstrap 2.3.2, as seen on Socialbliss

It should work in a dropdown or dropdown-submenu.

I hope this short article was helpful. Please post any questions or comments below!