Multilevel dropdowns/submenus using Bootstrap v3 07th Jan 2018

In this blog we will see couple of approaches to create submenus/multilevel dropdowns.

What we will achieve at the end of this blog

We will see how we can display multilevel values in a clean way which works in all broswers including IE 9,10,11,Edge,Firefox and Chrome.

Just a quick back story,bootstrap has stopped support for submenu since version 3. The main reason I think is because having submenu’s make the UI clumsy and also not mobile friendly. However, in this blog we will still see how to create submenu (in case your requirement still needs it)even though boostrap has stopped supporting it Later, we will also look at alternative way to display the multilevel items in a better way in approach 2.

Let’s assume you are a building a website for fruit vendor and below is the quick video of how the website should look like Approach 1: Source Code-Link to github.

In above code,look for Index.html for the approach 1

Issue with above approach is that you don’t get a scrollbar.Overflow has to be kept to visisble and not auto

Approach 2: Source Code-Link to github

In above code,look for multilevelselect.html for approach 2

Now if you are little bit more flexible with your requirement, you can redesign your front end and use multilevel dropdown .Below is a quick demo.

Following above approach makes it much more cleaner UI and also works on various devices including mobile,tablets etc.Also,various browsers including IE 9 etc are well supported.

So when you drill down to level 2, and select a checkbox, you can filter records on the selected checkbox.Basically, you will have to make a database call sending the value of the checked box/checked boxes and then display the filtered result.

Did you like the blog or have questions, please add your comments