38

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?

AtomicCharles
  • 111
  • 1
  • 3
  • 12
StackOverflowed
  • 5,854
  • 9
  • 55
  • 119

5 Answers5

52

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;
    }
}
maciejp
  • 651
  • 8
  • 13
  • 2
    Thank you very much! The above solutions make it hard in a dynamic setting, yours is perfect and much more flexible. Cheers to you sir! – TheRealJAG Apr 07 '14 at 03:57
  • can we have Variable width for columns? I'm having an issue such that a single item with too much width is causing all the columns in dropdown to resize to width on that item. Thus looking awkward, where column 1 which si single word is taking up half the space of the browser width while second column fits the title text accordingly. – VarunC Feb 20 '15 at 11:10
  • @VarunC try using column-span http://www.w3schools.com/cssref/css3_pr_column-span.asp http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-span – maciejp Feb 26 '15 at 11:09
  • 2
    that's the best solution. Small code and work very well. In my case when I added another div (trying the first answer) inside de UL, all my texts change the color, with this solution this not occur. Thanks a lot! – Elvis Oliveira May 12 '15 at 20:03
  • 1
    Well, it works great - for sure. But has no IE-Support at all. Works only in IE12. – dstN Nov 02 '15 at 13:17
  • 1
    This is an especially helpful solution when you're creating dropdown menus dynamically (e.g., WordPress) and changing the markup for a dropdown menu is kind of a pain. – Travis Hohl Mar 09 '16 at 01:31
  • 1
    Great for a responsive design!! – redgeoff Feb 17 '17 at 23:02
49

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>
Sylvain Rayé
  • 2,456
  • 16
  • 23
inki
  • 1,926
  • 17
  • 25
  • if someone is looking for a bootstrap 1.4 solution use `class="row container-fluid"` instead of `row-fluid` – mgttlinger Jan 08 '14 at 09:55
  • 4
    I'm surprised anyone in 2014 would be posting an update for Bootstrap 1.4 as opposed to BS 3+. :) – StackOverflowed Nov 19 '14 at 23:45
  • 1
    Is it just me, or do the columns loose their responsiveness? e.g., try `
      `
     – Noz Mar 19 '15 at 16:43
  • 1
    On Bootstrap 3, styling was lost on the drop-down columns. – shuckc Apr 27 '16 at 08:15
  • Great job @inki! But I have a question: How can I to center the div? I want center screen, not starting at the li parent :c or how to make full width, but will be more nice if there's a possible to center it! Thanks! – candlejack Jul 07 '16 at 02:40
  • 1
    Adding the styles `margin:0 auto !important;position:relative;display:block;` to `
      ` it centers the div but broke the menu :(
     – candlejack Jul 07 '16 at 02:45
13

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;
}
Roger Jeffs
  • 131
  • 1
  • 2
5

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).

Scotty.NET
  • 12,533
  • 4
  • 42
  • 51
0

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

Eric Uldall
  • 2,282
  • 1
  • 17
  • 30