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 with dropdown

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

					
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton1">Default button</button> <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1"> <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>
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton2">Primary button</button> <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton2"> <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>

Disabled

Just add .disabled class on the main div that is wrapping the button (.dropdown), on the parent or on button (.btn) or only the attribute on the button tag.

					
<div class="dropdown disabled"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton1">Default button</button> <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1"> <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>
<div class="dropdown"> <button type="button" class="btn btn-primary disabled dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton2">Primary button</button> ... </div>
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" disabled data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownButton2">Primary button</button> ... </div>

Large dropdowns

Just add .btn-lg class on the button.

					
<div class="dropdown"> <button type="button" class="btn btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default button</button> <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton1"> ... </ul> </div>
<div class="dropdown"> <button type="button" class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary button</button> <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="dropdownButton2"> ... </ul> </div>

Split button with dropdown

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
					
<div class="btn-group btn-split"> <button type="button" class="btn">Default</button> <button type="button" class="btn 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>
<div class="btn-group btn-split btn-split-primary"> <button type="button" class="btn">Primary</button> <button type="button" class="btn 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>

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.

					
<div class="btn-group btn-split disabled"> <button type="button" class="btn">Default</button> <button type="button" class="btn 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>
<div class="btn-group btn-split btn-split-primary disabled"> <button type="button" class="btn">Primary</button> <button type="button" class="btn 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>

Large split buttons

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

					
<div class="btn-group btn-split btn-group-lg"> <button type="button" class="btn">Default</button> <button type="button" class="btn 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>
<div class="btn-group btn-split btn-split-primary btn-group-lg"> <button type="button" class="btn">Primary</button> <button type="button" class="btn 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>

Drop-up

For the dropdown there are 2 option available, one is down (the default), and the other option is up - .dropup

					
<div class="dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Simple button</button> <ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true"> <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>
<div class="btn-group btn-split dropup"> <button type="button" class="btn">Split button</button> <button type="button" class="btn 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>