How to create a dropdown menu in a Bootstrap navbar?

To create a drop-down menu in the Bootstrap navigation bar, you need to use the Bootstrap classes and structure correctly. The specific steps are as follows: 1. Use .navbar, .navbar-nav, .nav-item and .nav-link to build the basic navigation bar; 2. Add .nav-item.dropdown class on the list items that need to be pulled down; 3. Add .nav-link.dropdown-toggle class to the drop-down trigger link, and set data-bs-toggle="dropdown" to activate the drop-down function; 4. Create an unordered list containing the .dropdown-menu class as the drop-down menu container, and set the menu item to the .dropdown-item class; 5. Make sure to introduce Bootstrap's JavaScript file (including Popper.js) to support drop-down interaction; 6. Optionally use .dropdown-menu-end to achieve right alignment, .dropdown-divider adds dividing lines, and .dropdown-menu-dark enables dark themes; 7. Test whether the drop-down menu can be clicked normally to expand and collapse, support keyboard operations, and click on the external area to close, and finally achieve a complete and beautiful drop-down menu.

Creating a dropdown menu in a Bootstrap navbar is straightforward using Bootstrap's built-in classes and structure. Here's how to do it step by step.

✅ Use the Correct Bootstrap Navbar Structure

First, make sure you're using the proper Bootstrap navbar markup. You'll need the .navbar , .navbar-nav , and .nav-item / .nav-link classes.

Here's a working example with a dropdown:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MySite</a>

    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>

        <!-- Dropdown Menu -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Web Design</a></li>
            <li><a class="dropdown-item" href="#">Development</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Consulting</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

? Key Points to Remember

<li> dropdown class on <li> : Wrap the dropdown toggle and menu inside a <li> with class .nav-item.dropdown .<li> dropdown-toggle and data-bs-toggle="dropdown" : These activate the toggle behavior.<li> dropdown-menu : This is the container for the dropdown items.<li> dropdown-item : Apply this class to each link inside the dropdown for proper styling.<li> Include Bootstrap JS : Dropdowns require Bootstrap's JavaScript (and Popper.js) to work. Make sure you've included it:

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Optional Enhancements

You can also:

<li> Add icons or badges inside dropdown items<li> Use .dropdown-divider for visual separation<li> Position the menu on the right with .dropdown-menu-end<li> Enable dark dropdowns with .dropdown-menu-dark

Example of right-aligned dropdown:

 <ul class="dropdown-menu dropdown-menu-end">
  ...
</ul>

? Test It

Make sure:

<li> The dropdown opens on click (not hover by default) <li> It closes when clicking outside <li> It's accessible via keyboard (Tab Enter)

That's it! With the right classes and Bootstrap JS loaded, your navbar dropdown will work smoothly. Just plug it into your layout.

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