Bootstrap 5 Dropdown Menus: Click-Expanded Navigation Option Lists

In web development, navigation menus are an indispensable part. However, when there are many menu items, listing them directly occupies a lot of space and affects the page’s aesthetics. Bootstrap 5’s Dropdown component perfectly solves this problem—it can “collapse” multiple options under a single button, expanding the list only when the button is clicked, thus saving space while keeping the interface clean.

I. Preparation: Import Bootstrap 5 and Dependencies¶

To use Bootstrap 5’s dropdown menu, you first need to include Bootstrap’s CSS and JavaScript files. Note that Bootstrap 5’s dropdowns depend on Popper.js (used for menu positioning), so include the following resources in order:

<!-- Import Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Import Popper.js first (required for dropdown positioning) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>

<!-- Then import Bootstrap 5 JavaScript (includes dropdown functionality) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

II. Create a Basic Dropdown Menu¶

The core structure of a dropdown menu consists of three parts: container, trigger button, and option list. Here’s a complete example:

<div class="dropdown">
  <!-- Trigger Button -->
  <button class="btn btn-primary dropdown-toggle" 
          type="button" 
          id="dropdownMenuButton" 
          data-bs-toggle="dropdown" 
          aria-expanded="false">
    My Menu
  </button>

  <!-- Dropdown Option List -->
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Home</a></li>
    <li><a class="dropdown-item" href="#">Products</a></li>
    <li><a class="dropdown-item active" href="#">About Us</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item disabled" href="#" tabindex="-1">Contact Us</a></li>
  </ul>
</div>

III. Structure Analysis (Essential for Beginners)¶

1. Container:
   Wrapped in <div class="dropdown">, this is the “root container” for the dropdown menu. All elements must be inside this container.

2. Trigger Button:
   - class="btn btn-primary dropdown-toggle": btn is the base button style, btn-primary sets a blue theme, and dropdown-toggle is the key class to trigger the dropdown.
   - data-bs-toggle="dropdown": Tells Bootstrap this is a dropdown trigger; clicking it expands/collapses the list.
   - aria-expanded="false": An accessibility attribute. Initially, the dropdown is collapsed, so set to false; it automatically changes to true when expanded.
   - id="dropdownMenuButton": Associates with the dropdown list for accessibility (optional but recommended).

3. Option List:
   - class="dropdown-menu": Container for the dropdown list. By default, it’s left-aligned; use dropdown-menu-end to right-align.
   - List items are wrapped in <li>, with options defined via <a class="dropdown-item"> or <button class="dropdown-item">.

   • active: Highlights the current selected item (blue background).
   • disabled: Disables the option (grayed out and unclickable; add tabindex="-1" to prevent keyboard access).
   • dropdown-divider: A divider (implemented with <hr> to separate different categories of options).

IV. Interaction Logic (No Extra Code Needed)¶

Bootstrap 5’s dropdown menu has built-in interaction logic. Just write the HTML as above—clicking the trigger button expands/collapses the list. After selecting an item, the dropdown automatically closes (no manual JavaScript required).

V. Advanced Usage: Alignment and Direction¶

• Right-Aligned Dropdown: Add dropdown-menu-end to dropdown-menu to make the menu expand to the right:

  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">

• Upward/Downward Expansion: By default, dropdowns expand downward. To expand upward (e.g., if space is limited at the bottom), add the dropup class to the container:

  <div class="dropdown dropup"> <!-- Expands upward -->

VI. Common Issues and Solutions¶

1. Dropdown Not Expanding?
   Check if Popper.js and Bootstrap’s JavaScript are imported in the correct order (Popper first, then Bootstrap):

   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

2. Menu Item Styles Broken?
   Ensure all options are wrapped in <li>, and <a> or <button> use the dropdown-item class.

VII. Summary¶

The core of Bootstrap 5’s dropdown menu is: dropdown container + dropdown-toggle button + dropdown-menu list, powered by Popper.js and Bootstrap JS for interaction. With simple class names (e.g., active, disabled, dropdown-menu-end), you can quickly achieve highlighting, disabling, alignment, etc., without complex code. Mastering these basics allows you to build clean and efficient navigation menus easily!