Bootstrap 5 Dropdowns

Basic Dropdown

The simplest dropdown consists of a button trigger and a menu with items. Use the dropdown-toggle class and data-bs-toggle="dropdown" attribute to enable the dropdown functionality. The menu automatically positions itself below the button and closes when clicking outside.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Select Option
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Option 1</a></li>
    <li><a class="dropdown-item" href="#">Option 2</a></li>
    <li><a class="dropdown-item" href="#">Option 3</a></li>
  </ul>
</div>

🔹 Dropdown Variations

Bootstrap dropdowns are highly customizable. The trigger button can use any contextual color class (.btn-primary, .btn-success, etc.) to match your design system. For more advanced interfaces, split button dropdowns combine a default action button with a separate dropdown toggle. This pattern provides users with a primary, immediate action while grouping secondary, related actions in the dropdown. These variations allow developers to tailor the component's visual weight and functionality to specific use cases, from simple navigation menus to complex application toolbars, all while maintaining consistent behavior and styling.

🔸 Colored Dropdowns

<div class="dropdown">
  <button class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
    Success
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Save</a></li>
    <li><a class="dropdown-item" href="#">Save As</a></li>
  </ul>
</div>

🔸 Split Button Dropdown

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Edit</a></li>
    <li><a class="dropdown-item" href="#">Delete</a></li>
  </ul>
</div>

🔹 Dropdown Directions

Control the placement of the dropdown menu using directional modifier classes. Adding .dropup positions the menu above the trigger button, useful near the bottom of the viewport. .dropend places it to the right, and .dropstart to the left. These classes adjust the menu's CSS positioning and arrow placement automatically. This control is crucial for adaptive layouts, ensuring dropdowns don't get cut off by viewport edges and remain fully visible to the user, thereby improving the overall interaction design and usability, especially on smaller screens.

<!-- Dropup -->
<div class="dropup">
  <button class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown">
    Dropup
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
  </ul>
</div>

<!-- Dropend -->
<div class="dropend">
  <button class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown">
    Dropend
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Item 1</a></li>
  </ul>
</div>

🔹 Dropdown Menu Items

Beyond simple links, dropdown menus can be structured for better organization and clarity. Use .dropdown-header to add non-clickable section titles within the menu. The .dropdown-divider class creates a thin horizontal line to visually separate groups of items. Applying the .disabled class to a menu item makes it unclickable and visually muted, which is ideal for temporarily unavailable actions. These features help transform a simple list into a well-organized navigation or action menu, guiding the user and making complex options more scannable and understandable.

<div class="dropdown">
  <button class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">
    Menu
  </button>
  <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Section 1</h6></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header">Section 2</h6></li>
    <li><a class="dropdown-item disabled" href="#">Disabled</a></li>
  </ul>
</div>