Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included dropdown directives.
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within dropdown
.
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:
And with <a>
elements:
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.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent.
Add class .dropdown-menu-right
to a dropdownMenu
to right align the dropdown menu.
Trigger dropdown menus above elements by adding .dropup
to the parent element.
It is possible to override default dropdown config partially or completely.