Bootstrap comes with a great drop down menu out of the box, but sometimes you just need more.

In this tutorial I’m going to show you how to extend the Bootstrap drop down menu to use multiple columns. This sort of menu is great for larger sites that showcase products and/or an extensive navigation structure.

HTML

We’re going to start with Bootstrap’s standard navbar and dropdown implementation. Then, for our new multi-column dropdowns we’ll follow Bootstrap’s HTML pattern by embedding rows and columns inside the dropdown-menu ul‘s. You can extend each dropdown-menu ul with the .multi-column class and then .columns-2 or .columns-3 classes to give them the number of desired columns. We’ll also add the .multi-column-dropdown class to nested ul‘s for styling.

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	    <span class="sr-only">Toggle navigation</span>
	    <span class="icon-bar"></span>
	    <span class="icon-bar"></span>
	    <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!--/.navbar-header-->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
	        <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a>
	            <ul class="dropdown-menu">
		            <li><a href="#">Action</a></li>
		            <li><a href="#">Another action</a></li>
		            <li><a href="#">Something else here</a></li>
		            <li class="divider"></li>
		            <li><a href="#">Separated link</a></li>
		            <li class="divider"></li>
		            <li><a href="#">One more separated link</a></li>
	            </ul>
	        </li>
	        <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
	            <ul class="dropdown-menu multi-column columns-2">
		            <div class="row">
			            <div class="col-sm-6">
				            <ul class="multi-column-dropdown">
					            <li><a href="#">Action</a></li>
					            <li><a href="#">Another action</a></li>
					            <li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
					            <li class="divider"></li>
					            <li><a href="#">Separated link</a></li>
					            <li class="divider"></li>
					            <li><a href="#">One more separated link</a></li>
				            </ul>
			            </div>
			            <div class="col-sm-6">
				            <ul class="multi-column-dropdown">
					            <li><a href="#">Action</a></li>
					            <li><a href="#">Another action</a></li>
					            <li><a href="#">Something else here</a></li>
					            <li class="divider"></li>
					            <li><a href="#">Separated link</a></li>
					            <li class="divider"></li>
					            <li><a href="#">One more separated link</a></li>
				            </ul>
			            </div>
		            </div>
	            </ul>
	        </li>
	        <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
	            <ul class="dropdown-menu multi-column columns-3">
		            <div class="row">
			            <div class="col-sm-4">
				            <ul class="multi-column-dropdown">
					            <li><a href="#">Action</a></li>
					            <li><a href="#">Another action</a></li>
					            <li><a href="#">Something else here</a></li>
					            <li class="divider"></li>
					            <li><a href="#">Separated link</a></li>
					            <li class="divider"></li>
					            <li><a href="#">One more separated link</a></li>
				            </ul>
			            </div>
			            <div class="col-sm-4">
				            <ul class="multi-column-dropdown">
					            <li><a href="#">Action</a></li>
					            <li><a href="#">Another action</a></li>
					            <li><a href="#">Something else here</a></li>
					            <li class="divider"></li>
					            <li><a href="#">Separated link</a></li>
					            <li class="divider"></li>
					            <li><a href="#">One more separated link</a></li>
				            </ul>
			            </div>
			            <div class="col-sm-4">
				            <ul class="multi-column-dropdown">
					            <li><a href="#">Action</a></li>
					            <li><a href="#">Another action</a></li>
					            <li><a href="#">Something else here</a></li>
					            <li class="divider"></li>
					            <li><a href="#">Separated link</a></li>
					            <li class="divider"></li>
					            <li><a href="#">One more separated link</a></li>
				            </ul>
			            </div>
		            </div>
	            </ul>
	        </li>
	        <li><a href="#">Link</a></li>
        </ul>
    </div>
    <!--/.navbar-collapse-->
</nav>
<!--/.navbar-->

CSS

The noteworthy CSS here is the min-width properties for the .columns-2 and .columns-3 ul‘s. These are necessary to keep the menu from doing some wild stuff… but, there are certainly other approaches. I also added some CSS for the .multi-column-dropdown ul‘s so they match Bootstrap’s styling.

*Note: be sure to include bootstrap.css in your head as well.

.dropdown-menu {
	min-width: 200px;
}
.dropdown-menu.columns-2 {
	min-width: 400px;
}
.dropdown-menu.columns-3 {
	min-width: 600px;
}
.dropdown-menu li a {
	padding: 5px 15px;
	font-weight: 300;
}
.multi-column-dropdown {
	list-style: none;
}
.multi-column-dropdown li a {
	display: block;
	clear: both;
	line-height: 1.428571429;
	color: #333;
	white-space: normal;
}
.multi-column-dropdown li a:hover {
	text-decoration: none;
	color: #262626;
	background-color: #f5f5f5;
}

@media (max-width: 767px) {
	.dropdown-menu.multi-column {
		min-width: 240px !important;
		overflow-x: hidden;
	}
}

JS

Just be sure to include jQuery and Bootstrap in your page (preferably towards the bottom, right before the closing body tag).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Conclusion:

That’s it – a clean and simple way to extend Bootstrap to allow for multiple column dropdown menus. As I said before, there are definitely other ways to achieve this, so please share your thoughts in the comments below.

Discussion

23 thoughts on “Bootstrap Multi-column Dropdown Menu”
  1. This is all fine and dandy. But for semantics purposes. It’s not valid to have Div nested directly in an ul. I changed the div underneath ul into a li and use CSS to fix it.

  2. thank you…that’s exactly what i needed. just 1 question… is there a way to open sub menu just by moving pointer over it? it requires to click on it to be opened.

    1. I found adding this to work great

      $(‘ul.nav li.dropdown’).hover(function() {
      $(this).find(‘.dropdown-menu’).stop(true, true).delay(100).fadeIn(500);
      }, function() {
      $(this).find(‘.dropdown-menu’).stop(true, true).delay(600).fadeOut(500);
      });

  3. Hi, thanks so much for this tutorial! This is what I have been looking for and I think with a few adjustments, it will be perfect for my site.

  4. Very nice tutorial, but I would like to know how I can create one colum then again on mouse over the columns splits again, like my website http://www.mongolia.co.uk. My website drop menu works on a desktop computer, but on mobile devices when it is shrunk, it becomes very difficuilt to navigate because it doesn’t fit in the screen. Can you help me please? Many thanks.

  5. This is great and exactly what I am looking for! However, how do I get this working in WordPress? I can get 1 dropdown menu working, but the column is a different story.. somebody please help?!

  6. Thanks a lot for those codes. You literally saved my life…LOL. I would, however, like to know if there is a way to style it such that when the page is viewed from a col-xs screen, the font color of the dropdown menu doesn’t blend in with the navbar. (I used a navbar-inverse) Please HELP!

  7. Hi All,

    Any thought on making it a dynamic menu using database values. I have a number of(say 100) logged in users with different access rights(Admins, Managers, Dept. Heads, Editors, Temp. Users etc) . Each user’s permission are set by us, allowing/limiting access to each section of the web application. In short the menu is loaded according to the logged in user, some may have two columns some three, all depending on their permission settings. I have stared a test environment already, any help is appreciated!

    Regards,
    AJ

  8. Hi,
    I’ve started studying Bootstrap 1 month ago, so I’m a complete newbie…
    For the moment, I’m “building” test-websites by just copy/pasting the examples I find on the net……and I must say; this tutorial is my favourite !!!

    But I’ve 1 question; what code do you have to use, to modify the dropdown-menu, so that you can have the first menu, then use a dropdown-submenu1, then dropdown-submenu2, etc….

    Can this be done, without having to use a javascript?
    Every tutorial I find on the internet, how to make multi-level dropdown-menu’s, is using a short code of Javascript.

    So I was wondering, can it also be done, without using such code?

    Maybe it’s a stupid question, but I still have to learn A LOT…! 🙂

    Kind regards,
    Peter

Leave a Comment

Your email address will not be published. Required fields are marked *


Ali Jafarian

Tutorial Category UI Design
Comments 23 comments

Did you find value here?

If yes, please jump on my email list for more free stuff. I'll keep bringing the heat.

Get on the List