Bootstrap vertical sidebar with collapsible sub-menu
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=submenuandcollapseto 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
Back to all examples