Creating Multiple List Dropdown Menu with Bootstrap

Question

I'm trying to create a dropdown navbar using the latest version of Bootstrap. I'd like to create a dropdown where I have two separate lists in the dropdown, next to each other vertically (similar to the Air Purifiers dropdown on this website

It seems that Bootstrap only supports horizontal dividers at the moment. Does anyone know of a css/html hack I can use to get around this?

manishie · Accepted Answer · 2012-11-02 16:12:22Z

2

See this fiddle: http://jsfiddle.net/manishie/CVYq6/

Basically, you take the regular bootstrap dropdown and change it from a ul to a div. But you keep the class name the same. Within that div, you can have whatever you want.

In this case you want two side by side lists, but you could have images, or any html you want.

Bootstrap works off the class name, so that when you click the toggle, whatever is in the .dropdown-menu class will appear.

HTML:

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <div class="dropdown-menu" role="menu">
      <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
      </ul>
      <ul>
          <li>blah</li>
          <li>blah blah</li>
          <li>blah blah blah</li>
      </ul>
  </div>
</div>

CSS:

.dropdown-menu ul {
    float: left;
}

.dropdown-menu ul:first-of-type {
    border-right: 1px solid black;
    padding-right:20px
}

edited Nov 2, 2012 at 16:12

answered Nov 2, 2012 at 4:06

manishie

5,3321 gold badge23 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davidkonrad Over a year ago

funny aria-labelledby="dLabel" references a label not shown either here or at fiddle :)

manishie Over a year ago

Good point. I copied some code from the bootstrap site and modified it to answer the question. That got left in there somehow. I've removed it and updated my answer. Thanks!

McGarnagle · Accepted Answer · 2012-11-02 00:46:35Z

0

I believe this functionality does not exist yet out of the box.

Related issue on github.

You can try to hack it and manually inject columns or just do it without using bootstrap at all.

If you need this for a menu you can try mega menu or flexbox

edited Nov 2, 2012 at 0:46

McGarnagle

103k31 gold badges235 silver badges264 bronze badges

answered Nov 2, 2012 at 0:27

RAS

3,39518 silver badges24 bronze badges

Collectives™ on Stack Overflow

Creating Multiple List Dropdown Menu with Bootstrap

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related