Bootstrap 5 Dropdowns

Welcome to The Coding College! In this tutorial, we’ll explore Bootstrap 5 Dropdowns, a versatile UI component that enhances navigation and user interaction. Dropdowns allow users to choose from a list of options or trigger additional actions in a streamlined, space-efficient way.

What Are Dropdowns in Bootstrap 5?

Dropdowns in Bootstrap 5 are toggleable menus that open when triggered. They are commonly used for navigation menus, actions, or options selection, providing a clean, accessible way to organize content.

Basic Dropdown Structure

A Bootstrap dropdown consists of a button or link (the trigger) and a dropdown menu containing list items.

Example: Basic Dropdown

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Output:

A button that toggles a dropdown menu with three items.

Dropdown Alignment

By default, dropdown menus align to the left. You can adjust the alignment using utility classes.

Right-Aligned Dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Right-Aligned Dropdown
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Dropdown Variations

Dropdown with Divider

Use the <li> element with the .dropdown-divider class to separate dropdown items.

<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown with Divider
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated item</a></li>
  </ul>
</div>

Dropdown with Headers

Add section headers using the .dropdown-header class.

<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown with Header
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><h6 class="dropdown-header">Dropdown Header</h6></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

Dropdowns in Navbar

Dropdowns are commonly used in navigation bars to group related links.

Example: Navbar Dropdown

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Split Button Dropdowns

Create split button dropdowns with the .btn-group class for an additional trigger.

Example: Split Button Dropdown

<div class="btn-group">
  <button type="button" class="btn btn-warning">Action</button>
  <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Dropdown Accessibility

Best Practices:

  1. Use aria-expanded to indicate the dropdown’s state.
  2. Assign a unique id to the trigger and link it to the dropdown menu using aria-labelledby.
  3. Ensure all interactive elements are keyboard accessible.

Styling Dropdowns

Customize dropdowns using Bootstrap utility classes or your own CSS. Adjust colors, spacing, and alignment to match your design needs.

Example: Custom Styling

<style>
  .custom-dropdown .dropdown-menu {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
  }
</style>

<div class="dropdown custom-dropdown">
  <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Custom Dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Custom Action</a></li>
    <li><a class="dropdown-item" href="#">Another Custom Action</a></li>
  </ul>
</div>

Common Use Cases

  • Navigation Menus: Dropdowns simplify complex navigation hierarchies.
  • Action Menus: Group related actions like “Edit” and “Delete.”
  • Form Selects: Use dropdowns to select options dynamically.

FAQs About Bootstrap 5 Dropdowns

Q1: How do I make a dropdown open on hover?

You can use custom CSS or JavaScript to toggle the dropdown on hover. However, Bootstrap 5 does not provide hover functionality out of the box.

Q2: Can I use icons in dropdowns?

Yes, you can add icons to dropdown items using <i> tags or SVGs.

Q3: How do I make a multi-level dropdown?

Bootstrap 5 does not support multi-level dropdowns natively, but you can achieve this with custom CSS and additional nested lists.

Conclusion

Bootstrap 5 Dropdowns are a powerful component for creating user-friendly, interactive interfaces. They are easy to implement, accessible, and customizable, making them an essential tool for modern web design.

Leave a Comment