Responsive multilevel menu with Bootstrap 3

A very short post to help other people that might run into the problem of finding the holy grail: a responsive, multilevel menu built with Bootstrap3.

Bootstrap 3 removed support for multilevel dropdowns, citing usability issues as the cause. I argue that there is a use case for multilevel menus when used sparingly and responsively. In a recent project I built with bootstrap, I found myself needing a 2 level main menu. I had assumed that Bootstrap could do this- after all its advantage is its ability to take anything you throw at it.

So when my submenus were not working I went on a hunt for a solution. It was not easy; I combed through stack echange questions, github issues and blog posts. I tried javascript hacks and css fixes. The biggest problem was getting it to work when the menu collapsed in small screens, and to work on click and not on hover.

When I finally found the answer I was skeptical at first:

Smartmenus is a jquery plugin to create responsive multilevel menus. I had considered using a standalone responsive menu script, but it seemed like a nightmare to integrate it with bootstrap styles and functionality. However, smartmenus has a plugin designed to work specifically with Bootstrap, and to respect all the bootstrap styles you have defined; it just extends the functionality! You can have navigations with multiple levels, and it automatically works on hover for large screens and on click when collapsed.

Implementing is easy, just include the javascript for the menu and the bootstrap plugin after your bootstrap js and the bootstrap plugin css after your theme css. No configuration necessary, and works with fixed and regular navs.

Demo Smartmenus download

22 comments on “Responsive multilevel menu with Bootstrap 3”

Step on January 16th, 2015 - 9:54am

Great, saved my day! Thanks a lot!

Marcos on March 6th, 2015 - 6:17pm

This save my night. It really help me to solve the multilevel problem with BS3.

Santhosh on April 6th, 2015 - 12:51pm

Thanks a lot

Bloggerschmidt on May 17th, 2015 - 9:30am

Thank you for this addon. Plugin and addon works like a charm.

responsivemultimenu on July 17th, 2015 - 7:04am

I would suggest http://responsivemultimenu.com

kemie on October 15th, 2015 - 6:12pm

Can this be integrated with Bootstrap?

Reply

Gene on August 13th, 2015 - 5:11am

Thank you, really. This is awesome.

ali on August 27th, 2015 - 1:42pm

thx dear <3 thx for share thx for share MIT. good luck

Red on September 2nd, 2015 - 10:20pm

Thank you so very much for this addon. This is what I was scouring the web for. So grateful to you.

Fred on September 16th, 2015 - 9:25pm

Tanks alot

Smyth on October 15th, 2015 - 12:07pm

Great menu component! Will there be support for Bootstrap 4?

kemie on October 15th, 2015 - 6:11pm

No clue, I actually hope bootstrap 4 can do this natively!

Reply

Nicholas on November 27th, 2015 - 12:17am

Hey thanks for sharing this GitHub project. Seems to work well with bootstrap 3 styles, hopefully my style customisations are applied without too much trouble. You have saved me quite a bit of time, I was going to have to write this myself. :-)

Andie on October 17th, 2016 - 11:55pm

This helped me a lot today, thank you so much!

Marco on December 10th, 2016 - 6:33am

Great job mate! You saved me. Thanks for having shared this.

Sixo on December 20th, 2016 - 8:21am

This was a huge help. Thanks for posting this didn’t know anything about the Smartmenus but has made life easier with multi level integration with WordPress

Animesh on December 21st, 2016 - 9:18am

I copied the same code in the demo for my sharepoint site but the nav bar doesnt collapse . What to do ?

Sezin Harris on August 28th, 2017 - 5:24pm

Animesh, Did you resolve? We’re running Sharepoint too I already ran into a problem with this plugin.

Thanks

Reply

Vkalfieri on May 24th, 2017 - 8:39pm

I’m going to try this one. It looks like what I need for my site with categories and subcategories! Been fiddling around with other fixes for a day and a half now…thanks!