Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
.dropdown
, or another element that declares
position: relative;
. Dropdowns can be triggered from
<a>
or
<button>
elements to better fit your potential needs.
Any single
.btn
can be turned into a dropdown toggle with some markup changes. Here’s how you can put them to work with either
<button>
elements:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
And with
<a>
elements:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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>
</div>
The best part is you can do this with any button variant, too:
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.
Trigger dropdown menus above elements by adding
.dropup
to the parent element.
If you want to see more examples and properties please check the official Bootstrap Documentation.