16 KiB
| layout | title | group |
|---|---|---|
| docs | Button dropdown | components |
Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper dropdown menu markup.
{% callout danger %}
Plugin dependency
Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dropdowns/) to be included in your version of Bootstrap. {% endcallout %}
Contents
- Will be replaced with the ToC, excluding the "Contents" header {:toc}
Single button dropdowns
Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it.
{% highlight html %}
{% endhighlight %}Split button dropdowns
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
{% highlight html %}
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
{% highlight html %}
Dropup variation
Trigger dropdown menus above elements by adding .dropup to the parent.
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
{% highlight html %}