Tuesday, September 3, 2013

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!

4 comments:

  1. Would you do this the same way in BS3?

    ReplyDelete
    Replies
    1. You couldn't do this exactly the same in BS3 for a few reasons:

      1. container-fluid is now just, container
      2. row-fluid is not just, row
      3.span6 will now be, col-md-6

      Assuming you made those changes where appropriate, you should get a similar result. (I haven't tried this in 3.0 yet)

      Give it a shot with the changes I mentioned and if it doesn't work out the way you'd hoped, just leave another comment here and we'll get it sorted.

      Delete
  2. Hi There,
    I've used your code above for my multi col navigation. However I have 4 longer main menu items with the drop down mutli column. This causes an issue because if you click say on the third menu item from the top nav, you only see have the drop down because the browser window cuts it off. Rather than positioning the dropdown directly below each main menu could you re-position the dropdown for all to left? This will then show all drop downs on the left.

    Are you able to help solve my issue please?
    Thank you

    ReplyDelete
    Replies
    1. I'm not 100% sure what your problem entails from the comment. Could you please send me a link to your site or some screenshots of how the problem looks so I can get a better idea?

      You can send the info to: eric@devlifeline.com and I'll take a closer look.

      Thanks for the comment! Lets get this figured out.

      Delete

Have a question? Something to add to the post? Do it here...