Bootstrap vertical sidebar with collapsible sub-menu

Demo (collapsible) Demo (accordion) Download all

Bootstrap has sidebar menu which can be done with nav and flex-column classes. But it doesn't offer submenus. In many cases you might need some extra inner collapsible menu when mouse clicks over any menu item. In this tutorial we will use bootstrap's javascript object new bootstrap.Collapse(element). It gives us smooth slide-down and slide-up animation effect. Before start make sure that you have included bootstrap.js file and your nav list is vertical.

Steps to create dropdown sidebar menu with Bootstrap 5

• Add your submenu ul li elements after the menu link, make sure you are inside the li element with class="nav-item"
• Add your own class like class=submenu and collapse to your inner submenu list.
• Now we will add event listener to our parent links and find next element which is collapsible. With plain js it is clicked_link.nextElementSibling
• Now we create another javascript object from Bootstrap's collapse function constructor new bootstrap.Collapse(my_collapsible_menu);

Here is the code for collapsible menu

Solution 2. We have another solution for sidebar dropdwon menu

Bootstrap has built in accordion functionality. It can be implemented anywhere - including menus. So, you just add special classes and and id for each element, then add data-bs-toggle="collapse". Check for more information on https://getbootstrap.com/docs/5.0/components/accordion/

We have included accordion based menu in out demo