How to create a multi-level dropdown in Bootstrap

To create a multi-level drop-down menu for Bootstrap 5, you need to combine custom CSS and JavaScript implementation; 1. Use a standard drop-down structure and nest submenu with dropdown-submenu class; 2. Add CSS positioning submenu (such as left:100%) and optionally add arrow styles; 3. Use JavaScript to prevent events from bubbling and switch submenu display, or use:hover trigger; 4. Ensure the introduction of CSS and JS CDN of Bootstrap 5.3.2; pay attention to the mobile experience and accessibility support of aria attributes, and finally realize the multi-level drop-down menu available across devices.

Creating a multi-level dropdown in Bootstrap (specifically Bootstrap 5, since earlier versions had more built-in support for dropdowns) requires a bit of custom CSS and proper HTML structure, as Bootstrap 5 doesn't support nested dropdowns by default. Here's how you can build a working multi-level dropdown menu using Bootstrap 5.

1. Basic HTML Structure

Start with a standard Bootstrap dropdown and nest additional dropdown menus inside.

 <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Multi-Level Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
    <li><a class="dropdown-item" href="#">Item 2</a></li>

    <!-- Nested Dropdown Trigger -->
    <li class="dropdown-submenu">
      <a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Sub-item 1</a></li>
        <li><a class="dropdown-item" href="#">Sub-item 2</a></li>

        <!-- Third Level -->
        <li class="dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" href="#">Sub-submenu</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Final Item 1</a></li>
            <li><a class="dropdown-item" href="#">Final Item 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

2. Add Custom CSS for Nested Menus

Bootstrap doesn't style nested .dropdown-menu elements by default, so you need to position them properly.

 /* Position submenu relative to parent */
.dropdown-submenu {
  position: relative;
}

/* Show submenu on hover or click (optional) */
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  border-radius: 0.375rem;
}

/* Optional: Add arrow indicator for submenus */
.dropdown-toggle::after {
  margin-left: auto;
  margin-right: 0;
}

.dropdown-submenu .dropdown-toggle::after {
  margin-left: 0.25em;
  vertical-align: 0.255em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

3. Handle Submenu Toggle with JavaScript (Optional)

By default, Bootstrap hides all dropdowns on click. To open nested menus, you can use a small script to stop propagation and toggle visibility.

 document.querySelectorAll('.dropdown-submenu a.dropdown-toggle').forEach(function(element) {
  element.addEventListener('click', function (e) {
    e.preventDefault();
    e.stopPropagation();
    this.parentElement.classList.toggle('show');
    this.nextElementSibling.classList.toggle('show');
  });
});

Alternatively, use hover if preferred:

 .dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

Note: Hover may not work well on touch devices.

4. Include Bootstrap CDN

Make sure you're including Bootstrap 5 CSS and JS:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Key Points to Remember

• Use dropdown-submenu as a custom class to identify nested items.
• Position submenus with left: 100% to align them to the right of the parent.
• Prevent event bubbleing with stopPropagation() in JavaScript.
• Test on mobile — multi-level dropdowns can be hard to use on touch devices.
• Consider accessibility: add aria-haspopup and aria-expanded attributes dynamically if needed.

Basically, Bootstrap gives you the foundation, but nested dropdowns need a little extra markup and styling. With the right structure and a few tweaks, you can have a smooth multi-level dropdown that works across devices.

The above is the detailed content of How to create a multi-level dropdown in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!