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>