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

19 comments on “Responsive multilevel menu with Bootstrap 3

  1. Nicholas on

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

    Reply
  2. Sixo on

    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

    Reply
  3. Vkalfieri on

    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!

    Reply

Leave a Reply

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