Bootstrap vertical sidebar with collapsible sub-menu
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
- Add your own class like
collapseto 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
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