What is the clean way to implement Bootstrap 5 multi-level dropdown vertical navbar? [duplicate]

Question

I want a responsive vertical navbar, which I am trying to get with Bootstrap 5. In that, I want multi-level dropdown menu items. I am sure it is possible to implement this through adding custom code to CSS and sort of create the whole multi-level dropdown functionality by yourself, but I want to keep things as clean as possible.

I tried the following code, but instead of going to the sub-level, dropdown collapses.

<!-- Sidebar -->
<aside class="col-12 col-md-3 col-xl-2 p-0 bg-dark flex-shrink-1">
  <nav class="navbar navbar-expand-md navbar-dark bg-dark flex-md-column flex-row align-items-center py-2 text-center sticky-top" id="sidebar">
    <div class="text-center p-3">
      <h1 class="h1"><a href="home.php" class="navbar-brand mx-0 font-weight-bold text-nowrap">DrishyamTech</a></h1>
      <h1 class="text-white display-6"><?php echo $current_user_id; ?></h1>
    </div>

    <button type="button" class="navbar-toggler border-0 order-1" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse order-last" id="nav">
      <ul class="navbar-nav flex-column w-100 justify-content-center">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userHomeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Home
          </a>
          <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end w-100 text-center" aria-labelledby="userHomeDropdown">
            <li><a class="dropdown-item" href="#">New Registration</a></li>
            <li class="dropdown">
              <a class="dropdown-item dropdown-toggle" href="#" id="getTopupDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Get Top-up
              </a>
              <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end w-100 text-center" aria-labelledby="getTopupDropdown">
                <li><a class="dropdown-item" href="#">New Registration</a></li>
                <li><a class="dropdown-item" href="#">New Registration</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    
  </nav>
</aside>

I searched a lot, but now I doubt if BS even has built-in functionality for my requirements. In case it does not, what would be the cleanest way to go about achieving this, preferably without changing current code (which works for single-level dropdown, but not multi-level)?

Answer 1

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.

Infinite Multiple Level Dropdown Menu base on Bootstrap 5 https://jsfiddle.net/dallaslu/mvk4uhzL/

Answer 2

Great question! I'm also still in process figuring this out too. One thing I learned was that there was a design decision years ago that dropdowns only work on click and that the parent item is not clickable. https://markdotto.com/2012/02/27/bootstrap-explained-dropdowns/ (via https://getbootstrap.com/docs/5.0/components/dropdowns/).

I therefore added some vanillajs to achieve display-on-hover while still sticking as much to bootstrap docs as possible: https://mandrasch.github.io/11ty-plain-bootstrap5/