Button Dropdowns

Prev Next

Any button can open a dropdown menu. Wrap the button and a .dropdown-menu list in a .btn-group, add data-toggle="dropdown", and Bootstrap's JS handles the open/close behavior — no custom script needed beyond the CDN bundle already loaded on this page. We'll cover the single-button caret dropdown, the two-button split dropdown, the dropup variant, and finish with a TrailMap "Save ▾" split button.

Single Button Dropdown

The whole button opens the menu. Give it .dropdown-toggle, data-toggle="dropdown", and a .caret span to draw the little triangle:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Actions <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Edit</a></li>
    <li><a href="#">Duplicate</a></li>
    <li class="divider"></li>
    <li><a href="#">Delete</a></li>
  </ul>
</div>

Bootstrap 3 syntax: the toggle attribute is data-toggle="dropdown". Bootstrap 5 renamed this family of attributes to data-bs-toggle — if you copy a snippet from a newer tutorial into a Bootstrap 3 page, the dropdown simply won't open until you strip the bs- prefix back out.

Split Button Dropdowns

A split dropdown separates the main action from the menu trigger: the first button runs a default action on click, and a second, caret-only button next to it opens the menu of alternatives.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Action</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Alternative one</a></li>
    <li><a href="#">Alternative two</a></li>
  </ul>
</div>

Dropup Variant

Add .dropup to the .btn-group wrapper to flip the menu so it opens upward instead of downward — useful when the button sits near the bottom of the viewport.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropup <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Option A</a></li>
    <li><a href="#">Option B</a></li>
  </ul>
</div>

TrailMap Example: Save Split Button

On the trail-editor page, hikers usually just want to save — but sometimes they want to save the trail as a personal favorite instead. A split button covers both without cluttering the toolbar:

<!-- TrailMap: trail editor "Save" split button -->
<div class="btn-group">
  <button type="submit" class="btn btn-success">Save</button>
  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Save as Favorite</a></li>
  </ul>
</div>

Up next: Those toolbar icons deserve real icons, not just text. In Glyphicons we cover Bootstrap 3's built-in icon font — no separate library required.

Prev Next