Dropdowns

A Bootstrap 5 dropdown is a toggle element plus a hidden menu that Bootstrap's own JS bundle (which quietly includes Popper.js for positioning) shows and hides on click — again with zero jQuery and zero code you have to write. Dropdowns show up everywhere: inside navbars, attached to buttons, and grouped with other buttons. We'll finish with a TrailMap "Sort by" dropdown for a trail-listing page.

1. The Basic .dropdown Pattern

Three pieces make a dropdown: a wrapping .dropdown element (for positioning context), a toggle button with .dropdown-toggle and data-bs-toggle="dropdown", and a .dropdown-menu holding .dropdown-item links. 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button"
          data-bs-toggle="dropdown" aria-expanded="false">
    Menu
  </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><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Something else</a></li>
  </ul>
</div>
No JS to write: Bootstrap's bundle listens for clicks on any data-bs-toggle="dropdown" element, positions the menu with Popper, toggles its visibility, and closes it again on an outside click or Escape — all built in.

2. Dropdown Alignment With .dropdown-menu-end

By default a dropdown menu is left-aligned with its toggle. Add .dropdown-menu-end to the menu to right-align it instead — useful when the toggle sits near the right edge of the page (like a "Sort by" control) and a left-aligned menu would overflow off-screen. 

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button"
          data-bs-toggle="dropdown">Sort by</button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Distance</a></li>
  </ul>
</div>
Tip: Responsive alignment classes also exist, like .dropdown-menu-lg-end — left-aligned on small screens, right-aligned from the lg breakpoint up.

3. Dropdowns Inside a Navbar

A dropdown works exactly the same way when it's one of the items in a .navbar-nav — just wrap that single <li> in .nav-item.dropdown instead of a bare .dropdown, and use .nav-link.dropdown-toggle for the toggle. 

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#"
       data-bs-toggle="dropdown">Regions</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Pacific Northwest</a></li>
      <li><a class="dropdown-item" href="#">Rocky Mountains</a></li>
    </ul>
  </li>
</ul>

4. Dropdowns Inside a Button Group

Nesting a dropdown inside a .btn-group is how you build a "split button" — a regular action button next to a small caret button that opens extra choices. 

<div class="btn-group">
  <button type="button" class="btn btn-primary">Save Trail</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
          data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#">Save to "Weekend Trips"</a></li>
    <li><a class="dropdown-item" href="#">Save to "Bucket List"</a></li>
  </ul>
</div>

5. Worked Example — TrailMap "Sort By" Dropdown

A trail-listing toolbar with a right-aligned "Sort by" dropdown offering Distance, Difficulty, and Rating, with the current choice marked .active. 

<div class="d-flex justify-content-end mb-3">
  <div class="dropdown">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button"
            id="sortByBtn" data-bs-toggle="dropdown" aria-expanded="false">
      Sort by: Distance
    </button>
    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="sortByBtn">
      <li><a class="dropdown-item active" href="?sort=distance">Distance</a></li>
      <li><a class="dropdown-item" href="?sort=difficulty">Difficulty</a></li>
      <li><a class="dropdown-item" href="?sort=rating">Rating</a></li>
    </ul>
  </div>
</div>

.dropdown-menu-end keeps the menu tucked under the button instead of spilling toward the page's left edge, since this toolbar sits flush against the right side of the listing page.

Next up: Breadcrumbs — a small but important navigation aid for showing users where they are in a site hierarchy.