Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown component.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
They're toggled by clicking, not by hovering.
Wrap the dropdown's toggle (your button or link) and the dropdown menu within dropdown
.
Dropdowns can be triggered from DropdownMenu
elements to better fit your potential needs.
Any single button can be turned into a dropdown toggle with some markup changes.
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 DropdownToggleSplit
for proper spacing around the dropdown caret.
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Opt into darker dropdowns to match a dark navbar or custom style by adding dark
attribute onto an existing DropdownMenu
component.
No changes are required to the dropdown items.
And putting it to use in a navbar:
Trigger dropdown menus above elements by addingm placement="dropup"
attribute to the parent element.
Trigger dropdown menus at the right of the elements by adding placement="dropend"
to the parent element.
Trigger dropdown menus at the left of the elements by adding placement="dropstart"
to the parent element.
You can also create non-interactive dropdown items with text
attribute. Feel free to style further with custom CSS or text utilities.
Add active
attribute to items in the dropdown to **style them as active**.
Add disabled
attribute to items in the dropdown to style them as disabled.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. You can change this with the directional .drop*
classes, but you can also control them with additional modifier classes.
Add alignment="end"
attribute to a DropdownMenu
component to right align the dropdown menu. Directions are mirrored when using Bootstrap in RTL, meaning alignment="end"
attribute will appear on the left side.
If you want to use responsive alignment, disable dynamic positioning by adding the display="static"
attribute and use the responsive variation classes.
To align right the dropdown menu with the given breakpoint or larger, add alignment="{-sm|-md|-lg|-xl|-xxl}-end"
.
To align left the dropdown menu with the given breakpoint or larger, add alignment="end"
and alignment="{-sm|-md|-lg|-xl|-xxl}-start"
.
Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place
Add a header to label sections of actions in any dropdown menu.
Separate groups of related menu items with a divider.
Place any freeform text within a dropdown menu with text and use spacing utilities .
Note that you'll likely need additional sizing styles to constrain the menu width.
Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
Use offset
attribute or reference
attribute to change the location of the dropdown.
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu.
You can use the auto-close="true"
attribute option to change this behavior of the dropdown.