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.
When resize the window dropdown beyond the window.Do you have a solution to this problem?
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.
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.
Just add [ data-hover=”dropdown” data-delay=”0″ ] in your tag.
Like this : a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” data-hover=”dropdown” data-delay=”0″
“data-delay” is the delay that the sub menu disappears after not point over it.
I hope that will be useful! 😉
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);
});
can’t get this to work in IE … any ideas?
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.
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.
If I want to add another navigation top of this navigation in the same tag how can I do that?
Good tutorials, but should be replaced by and remove the tag and the code is valid.
Exactly. Thanks for pointing that out.
بسیار عالی
gud tutorial .thank you
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?!
Thanks Ali! Used it! 🙂
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!
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
U might have kept some session with which user,usertype is logged in,depend to that value add menu dynamically..
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
Woooww Ali that’s great Article … I love it
Tahsin Ali Jafri
exactly. I wanna try. I hope this codes is useful for my website, blogspot.
Anyway to make this close when clicking out? It does that on the same page but not if clicking in a frame.
super ali exactly i wanna also do this menu i got it thanq
Very good. Thank you.