Dropdowns

Prev Next

A Bootstrap 4 dropdown is a toggleable menu anchored to a button or link, driven by the same jQuery plugin family as tabs and collapse. The toggle element carries data-toggle="dropdown"; the menu itself is a plain sibling <div> with .dropdown-menu. We'll use dropdowns for a "Sort by" control on TrailMap's trail listing page.

Basic Dropdown Structure

Wrap the toggle and menu in a .dropdown container. The toggle needs .dropdown-toggle (for the little caret) and data-toggle="dropdown".

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button"
          id="sortMenuButton" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Sort by
  </button>
  <div class="dropdown-menu" aria-labelledby="sortMenuButton">
    <a class="dropdown-item" href="#">Distance</a>
    <a class="dropdown-item" href="#">Difficulty</a>
    <a class="dropdown-item" href="#">Rating</a>
  </div>
</div>

Note: the id on the toggle and the matching aria-labelledby on the menu aren't decoration — they're what lets screen readers announce which button owns the menu.

Dividers, Headers, and Right Alignment

.dropdown-divider draws a thin separator line; .dropdown-header labels a group of items. By default a menu opens aligned to the left edge of its toggle — add .dropdown-menu-right to flip it to the right edge instead.

<div class="dropdown-menu dropdown-menu-right">
  <h6 class="dropdown-header">Sort trails by</h6>
  <a class="dropdown-item" href="#">Distance</a>
  <a class="dropdown-item" href="#">Difficulty</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Reset sort</a>
</div>

Bootstrap 4 vs Bootstrap 5: this class is .dropdown-menu-right in Bootstrap 4. Bootstrap 5 renamed it .dropdown-menu-end as part of its broader left/right → start/end rename for RTL-friendliness. Using -end in a Bootstrap 4 project simply does nothing, since no such class exists in BS4's CSS.

Dropdowns in Navbars and Button Groups

A dropdown works the same way inside a navbar item — just wrap the .nav-item in .dropdown too.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="regionsMenu"
     data-toggle="dropdown">Regions</a>
  <div class="dropdown-menu" aria-labelledby="regionsMenu">
    <a class="dropdown-item" href="#">Pacific Northwest</a>
    <a class="dropdown-item" href="#">Rockies</a>
  </div>
</li>

Inside a .btn-group, the same markup produces a split-looking action menu next to other buttons, without needing the navbar wrapper at all.

Full Worked Example: TrailMap "Sort by" Dropdown

A sort control for TrailMap's trail listing page, showing which option is currently active.

<div class="dropdown">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button"
          id="trailSortBtn" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Sort by: Distance
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="trailSortBtn">
    <a class="dropdown-item active" href="#">Distance</a>
    <a class="dropdown-item" href="#">Difficulty (easy first)</a>
    <a class="dropdown-item" href="#">Highest rated</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Recently added</a>
  </div>
</div>

.dropdown-item.active gives "Distance" a highlighted background so hikers can see which sort order the listing is currently using.

Next, show visitors where they are in the site hierarchy with Breadcrumbs.

Prev Next