twitter bootstrap - multi column dropdown

Question

I'm trying to create a twitter bootstrap dropdown that has somewhere between 7-36 menu items. Unfortunately with that many items, I can only see the first 15 or so. I'd like to be able to split the number of items so that there are no more than 10 per column, before a new column is created.

I'm not trying to do nested dropdowns, I'm just trying to change the presentation of the dropdown so that there are no more than 10 items per column, however all of the items should still be displayed. I tried putting every 10 lis into their own div but that's not even HTML compliant I think. Is it possible to do this via TBS?

Answer 1

I adjusted the code to suit Bootstrap 3. For a 3-column dropdown:

<ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Heading 1 </a>
          <div class="dropdown-menu multi-column">
            <div class="row">
                <div class="col-md-4">
                    <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="col-md-4">
                    <ul class="dropdown-menu">
                        <li><a href="#">Col 2 - Opt 1</a></li>
                        <li><a href="#">Col 2 - Opt 2</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <ul class="dropdown-menu">
                        <li><a href="#">Col 2 - Opt 1</a></li>
                        <li><a href="#">Col 2 - Opt 2</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </li>
</ul>

I had to add the min-width, otherwise the 3rd column overflowed the right margin:

.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;
        min-width:100px;
}

Answer 2

I have a recent post showing how to achieve this for 2 columns that should be easily modified to fit your needs by changing the width of the multi-column dropdown and changing the number of spans in your fluid row.

Check it out: http://www.devlifeline.com/2013/09/multi-column-bootstrap-dropdown.html

FYI - This keeps the styles consistent with other bootstrap dropdown menus

Answer 3

I've solved it by adding class "columns" where I've set columns count and drop down width. Of course you can set columns count and width depending on media queries.

https://jsfiddle.net/maciej_p/eatv1b4b/18/

HTML:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">wybierz region<b class="caret"></b></a>
    <ul class="dropdown-menu columns">
        <li><a href="#"><strong>Górny Śląsk</strong></a></li>
        <li><a href="#">powiat będziński</a></li>
        <li><a href="#">powiat bielski</a></li>
        <li><a href="#">powiat bieruńsko-lędziński</a></li>
        <li><a href="#">powiat cieszyński</a></li>
        <li><a href="#">powiat częstochowski</a></li>
        <li><a href="#">powiat gliwicki</a></li>
        <li><a href="#">powiat kłobucki</a></li>
        <li><a href="#">powiat lubliniecki</a></li>
        <li><a href="#">powiat mikołowski</a></li>
        <li><a href="#">powiat myszkowski</a></li>
    </ul>
</li>

CSS:

@media screen and (max-width: 991px){
    .columns{
        height: 200px;
        overflow-y:scroll;
    }
}

@media screen and (min-width: 992px){
    .columns{
        -moz-column-count:2; /* Firefox */
        -webkit-column-count:2; /* Safari and Chrome */
        column-count:2;
        width: 500px;
        height:170px;
    }
}

Answer 4

Also have a look at the Mega Menu offerings out there.

(it helps if you say 'Mega Menu' in a silly voice)

Once decent offering is YAMM or YAMM3 (depending on which version of Bootstrap you are using).

Answer 5

You can use Bootstrap's .row-fluid to accomplish what you need.

I've inlined the css for the width of the dropdown menu but you can specify a class/id and include that in your stylesheet.

Basically, what's going on here is:

• We are creating a fluid grid inside of the dropdown
• Setting a fixed width for the dropdown container itself
• The li tags are inheriting their style from the parent dropdown

The example below was only tested in Chrome v23

* Boostrap 2.x:

<ul id="multicol-menu" class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div class="row-fluid" style="width: 400px;">
                    <ul class="unstyled span4">
                        <li><a href="#">test1-1</a></li>
                        <li><a href="#">test1-2</a></li>
                        <li><a href="#">test1-3</a></li>
                    </ul>
                    <ul class="unstyled span4">
                        <li><a href="#">test2-1</a></li>
                        <li><a href="#">test2-2</a></li>
                        <li><a href="#">test2-3</a></li>
                    </ul>
                    <ul class="unstyled span4">
                        <li><a href="#">test3-1</a></li>
                        <li><a href="#">test3-2</a></li>
                        <li><a href="#">test3-3</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>

[EDIT]

* Boostrap 3.x:

<ul id="multicol-menu" class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MultiCol Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <div class="row" style="width: 400px;">
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">test1-1</a></li>
                        <li><a href="#">test1-2</a></li>
                        <li><a href="#">test1-3</a></li>
                    </ul>
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">test2-1</a></li>
                        <li><a href="#">test2-2</a></li>
                        <li><a href="#">test2-3</a></li>
                    </ul>
                    <ul class="list-unstyled col-md-4">
                        <li><a href="#">test3-1</a></li>
                        <li><a href="#">test3-2</a></li>
                        <li><a href="#">test3-3</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
</ul>

Answer 6

Look over this plugin it will be useful for you.

http://alijafarian.com/bootstrap-multi-column-dropdown-menu/