How can I implement nested dropdown menus in Bootstrap 5, ensuring that submenus open and close properly?

Question

How can I fix a multi-level dropdown issue in Bootstrap, where submenus do not open as expected on click?

I tried making a multi-level dropdown menu in Bootstrap isn't functioning as expected. The submenu under the dropdown "Types of Massages" does not open when clicked. Here is my code:

<ul class="dropdown-menu" aria-labelledby="massagesDropdown">
                                    <li><a class="dropdown-item" href="historyOfMassages.html">History of Massages</a>
                                    <li><a class="dropdown-item" href="benefitsOfMassages.html">Benefits of Massages</a>
                                    <li class="dropstart">
                                        <a class="dropdown-item dropdown-toggle" data-bs-toggle="dropdown" href="typesOfMassages.html">Types of Massages</a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#" class="dropdown-item">Item 1</a></li>
                                            <li><a href="#" class="dropdown-item">Item 2</a></li>
                                            <li><a href="#" class="dropdown-item">Item 3</a></li>
                                        </ul>
                                    </li>
                                    </li>
                                </ul>

I tried making a multi-level dropdown using Bootstrap 5.3.3, the first two dropdown menus open, however the third doesent open. I assume this is because Bootstrap in general doesen't support multi level dropdowns, however I am already too far in ,y project to stop and use another framework like Tailwind

Answer 1

Yes you can do it without any additional CSS and JS. Below is the Demo code just play around with dropdown data-bs-auto-close="outside" properties

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">First Dropdown</a>
        <ul class="dropdown-menu">
           <li><a class="dropdown-item" href="#">Action</a></li>
           <li class="dropend">
              <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">2nd Dropdown</a>
               <ul class="dropdown-menu dropdown-menu-end">
                 <li><a class="dropdown-item" href="#">Menu item</a></li>
                 <li><a class="dropdown-item" href="#">Menu item</a></li>
                 <li class="dropend">
                  <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">3rd Dropdown</a>
                   <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                    <li><a class="dropdown-item" href="#">Menu item</a></li>
                   </ul>
                 </li>
              </ul>
            </li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
</li>

For reference you can visit official bootstrap dropdown documentation here https://getbootstrap.com/docs/5.3/components/dropdowns