Dropdowns

A Bootstrap 3 dropdown attaches a floating menu of choices to a button or link. The wrapping .dropdown element, a .dropdown-toggle trigger marked with data-toggle="dropdown", and a .dropdown-menu list are all it takes — Bootstrap 3's bundled jQuery plugin handles the showing, hiding, and closing on outside click. We'll build a "Sort by" dropdown for TrailMap's trail listing page.

The Toggle: .dropdown-toggle, .caret and data-toggle

Wrap the trigger and its menu in a .dropdown element. The trigger button carries .dropdown-toggle and data-toggle="dropdown", which is what Bootstrap's JavaScript listens for. A .caret span draws the small downward-pointing triangle.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
          data-toggle="dropdown">
    Sort By <span class="caret"></span>
  </button>
  <!-- .dropdown-menu goes here -->
</div>
Note: Just like the navbar toggle, this is data-toggle="dropdown" — the Bootstrap 3 attribute name. Bootstrap 5 renamed it to data-bs-toggle="dropdown"; mixing the two prefixes is a common cause of a dropdown that silently refuses to open.

.dropdown-menu, Headers, and Dividers

The menu itself is a plain <ul class="dropdown-menu">, with each choice as an <li><a> pair. .dropdown-header labels a group of items without being clickable, and .divider draws a thin horizontal rule to separate groups.

<ul class="dropdown-menu">
  <li class="dropdown-header">Sort by</li>
  <li><a href="#">Distance</a></li>
  <li><a href="#">Difficulty</a></li>
  <li class="divider"></li>
  <li><a href="#">Highest Rated</a></li>
</ul>

Right-Aligning with .dropdown-menu-right

By default the menu opens left-aligned under the toggle. Add .dropdown-menu-right to align its right edge with the toggle's right edge instead — useful when the toggle sits near the right side of the page and a left-aligned menu would overflow.

<ul class="dropdown-menu dropdown-menu-right">
  <li><a href="#">Distance</a></li>
  <li><a href="#">Difficulty</a></li>
</ul>
Note: This class name is one of the more stable ones across versions. Bootstrap 4 kept the exact same .dropdown-menu-right name. It wasn't renamed until Bootstrap 5, which switched to the logical-property-inspired .dropdown-menu-end.

Dropdowns Inside a Navbar

A dropdown works the same way inside a .navbar-nav list — wrap the <li> in .dropdown and give the link inside it .dropdown-toggle.

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Trails <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Browse All</a></li>
      <li><a href="#">Submit a Trail</a></li>
    </ul>
  </li>
</ul>

Worked Example: TrailMap's "Sort By" Dropdown

A complete "Sort by" control for the trail-listing page, combining a toggle button, a header, and a divider.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button"
          id="sortByBtn" data-toggle="dropdown">
    Sort By: Distance <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="sortByBtn">
    <li class="dropdown-header">Sort trails by</li>
    <li><a href="#">Distance</a></li>
    <li><a href="#">Difficulty (Easy first)</a></li>
    <li><a href="#">Highest Rated</a></li>
    <li class="divider"></li>
    <li><a href="#">Recently Added</a></li>
  </ul>
</div>
Next, learn how to show a user's location within a site hierarchy with Breadcrumbs.