Button dropdowns

A button dropdown (menu button) always shows a list of commands when clicked, and selecting one of them performs that command immediately. Read more about button dropdowns in the UX Guidelines.

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Use when:

  • To gather a small set of related actions or commands
  • The screen real estate is limited and there is no space to display every action as its own button
  • The actions do not have to be instantly available.

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

Disabled single button dropdowns

Just add .disabled class on the main div that is wrapping the button (.dropdown) or on button inside it.

Large single button dropdowns

Just add .btn-lg class on the button.


Split button dropdowns

A split button is a combination of a regular button and an icon part. The labeled button part performs the command on the label, and clicking the small icon part displays a menu of alternative commands. Read more about split buttons in the UX Guidelines.

  • To gather a small sets of related actions or commands
  • The screen real estate is limited and there is no space to display every action as a separate button
  • One of the actions needs to be instantaneously available or is used most of the time

Disabled split buttons

Just add .disabled class on the main div that is wrapping the buttons (.btn-group.btn-split) or on each button inside it.

Large split buttons

Just add .btn-group-lg class on the main div that is wrapping the buttons (.btn-group.btn-split).

				
<!-- Single button -->
<div class="btn-group">
  <button type="button" id="dropdownMenuButton1" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
  <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownMenuButton1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Split button -->
<div class="btn-group btn-split">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" id="dropdownMenuButton2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Dropdown options">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>