Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown component.
Overview
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
They're toggled by clicking, not by hovering.
Examples
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.
Single button
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:
Split button
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.
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Dark dropdowns
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:
Directions
Dropup
Trigger dropdown menus above elements by addingm placement="dropup" attribute to the parent element.
Dropright
Trigger dropdown menus at the right of the elements by adding placement="dropend" to the parent element.
Dropleft
Trigger dropdown menus at the left of the elements by adding placement="dropstart" to the parent element.
Menu items
You can also create non-interactive dropdown items with text attribute. Feel free to style further with custom CSS or text utilities.
Active
Add active attribute to items in the dropdown to **style them as active**.
Disabled
Add disabled attribute to items in the dropdown to style them as disabled.
Menu alignment
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.
Responsive alignment
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".
Alignment options
Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place
Menu content
Headers
Add a header to label sections of actions in any dropdown menu.
Dividers
Separate groups of related menu items with a divider.
Text
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.
Forms
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.
Dropdown options
Use offset attribute or reference attribute to change the location of the dropdown.
Auto close behavior
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.