Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
We created a
base-dropdown component that can be used to create dropdowns.
You can use the defaul trigger which is an
<a> or change to a custom one via
slot="title" to better fit your potential needs.
# Dropdown link
The best part is you can do this with any button variant, too:
# 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
# Dropup variation
Trigger dropdown menus above elements by adding
.dropup to the parent element.
Set for the
.dropdown-black class to change the drodown background’s color.