How to create a multi-level dropdown in Bootstrap navbar?

To create a multi-level drop-down menu in the Bootstrap navigation bar, 1. You need to build a multi-level menu through a nested

structure; 2. Add a custom CSS to control the submenu position, such as setting the relative positioning of .dropdown-submenu and the left offset of .dropdown-menu; 3. Use data-bs-toggle="dropdown" or custom JS to implement the submenu expansion logic, such as clicking to switch the display status; 4. Optimizing mobile interaction, it is recommended to click to expand, limit the levels, and consider using the folded menu to adapt to touch screen operations.



Bootstrap's navigation bar (navbar) only supports single-layer drop-down menus by default, but many times we want to add multi-level submenu to the navigation (such as expanding the second or even the third level menu after mouse hovering or clicking). It is actually not difficult to implement this function. It mainly extends the native functions of Bootstrap through custom CSS and JS.



The following are the specific operation methods and precautions:

---

How to create a multi-level drop-down menu in the Bootstrap navigation bar

Bootstrap itself does not directly support multi-level drop-down menus, so you need to manually modify the HTML structure and cooperate with some CSS or JavaScript to make the secondary menu appear. The key point is to correctly nest <ul></ul> elements and control how they appear.



The basic structure is as follows:

 <ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">First-level menu</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Submenu1</a></li>
      <li class="dropdown-submenu">
        <a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Items with submenu</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Second-level menu 1</a></li>
          <li><a class="dropdown-item" href="#">Second-level menu 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

This will build a basic multi-level structure, but it also requires style support to display it normally.



---

Add CSS style to control the position of submenu

By default, Bootstrap's .dropdown-menu is hidden, and even if you set up a nested .dropdown-menu , it will appear below the parent menu, not next to it.

You need to add a CSS to make it display horizontally and position it to the right place:

 .dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

This CSS allows the submenu to pop up to the right and display it against the parent menu. If you want to pop up from right to left, you can change it to right: 100% .

---

Use JavaScript to control how submenu is triggered

Although Bootstrap provides data-bs-toggle="dropdown" attribute to control the display of the primary menu, the default is not automatically expanded for the secondary menu. You can choose the following ways to deal with it:

• Dropdown plugin using Bootstrap : Add data-bs-toggle="dropdown" attribute to the link to the submenu.
• Add custom JS : prevents the menu from closing when clicked, or automatically expanding when hovering.

For example:

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

This allows the user to manually switch the display status of the submenu when clicking an item with a submenu.

---

Mobile adaptation and interaction optimization

Multi-level menus may not be very friendly on mobile, especially when they are nested too deeply. It is recommended to make the following optimizations:

• Disable the hover behavior of the submenu on the small screen and click to expand instead.
• Avoid nesting too many levels, it is best to have two layers at most.
• Consider using a folding menu (Collapse) instead of a drop-down menu, which is more suitable for touch screen operations.

---

Basically that's it. The key to implementing multi-level drop-down menus is structural nesting, CSS positioning and appropriate interaction logic. It doesn't seem complicated, but it's easy to ignore details in actual projects, especially the responsive design part.

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