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.
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.
Large dropdowns
Just add .btn-lg class on the button.
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>