Anniversary Button Drop Down Menus
Button dropdowns
Use any button to trigger a dropdown menu by placing it within a .btn-group
and providing the proper menu markup.
Single button dropdowns
Turn a button into a dropdown toggle with some basic markup changes.
The color of the button is determined by the btn-default
(see below), substitute with btn-success
(green), btn-danger
(red), btn-info
(pale blue), btn-primary
(dark blue) or btn-warning
(orange).
<div class="btn-group"> <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default <span class="caret"></span></div> <ul class="dropdown-menu" role="menu"> <li>[[Action]]</li> <li>[[Another action]]</li> <li>[[Something else here]]</li> <li class="divider"></li> <li>[[Separated link]]</li> </ul> </div>
Split button dropdowns
Similarly, create split button dropdowns with the same markup changes, only with a separate button.
<div class="btn-group"> <div class="btn btn-default">Default</div> <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </div> <ul class="dropdown-menu" role="menu"> <li>[[Action]]</li> <li>[[Another action]]</li> <li>[[Something else here]]</li> <li class="divider"></li> <li>[[Separated link]]</li> </ul> </div>
Sizing
Button dropdowns work with buttons of all sizes.
The size of the button is determined by the btn-lg
(see below), substitute with btn-sm
(small), btn-xs
(extra small) or remove the size class to display the default size.
<div class="btn-group"> <div class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Large button <span class="caret"></span> </div> <ul class="dropdown-menu" role="menu"> <li>[[Action]]</li> <li>[[Another action]]</li> <li>[[Something else here]]</li> <li class="divider"></li> <li>[[Separated link]]</li> </ul> </div>
Dropup variation
Trigger dropdown menus above elements by adding .dropup
to the parent.
<div class="btn-group dropup"> <div class="btn btn-default">Dropup</div> <div class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span> </div> <ul class="dropdown-menu" role="menu"> <li>[[Action]]</li> <li>[[Another action]]</li> <li>[[Something else here]]</li> <li class="divider"></li> <li>[[Separated link]]</li> </ul> </div>