Dropdown
Basic
Split
withIcon
menuSizing
Theme
ThemeSoft
Options
| Reference | Details |
|---|---|
Dropdown
|
Wrap the dropdown's toggle (your button or link) and
the dropdown menu within .dropdown, or
another element that declares
position: relative;. Ideally, you should
use a <button> element as the
dropdown trigger, but the plugin will work with
<a> elements as well. The examples
shown here use semantic
<ul> elements where appropriate,
but custom markup is supported.
|
Split button
|
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.
|
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
.dropdown-menu-dark onto an existing
.dropdown-menu. No changes are required
to the dropdown items.
|
Centered
|
Make the dropdown menu centered below the toggle with
.dropdown-center on the parent element.
|
Dropup
|
Trigger dropdown menus above elements by adding
.dropup to the parent element.
|
Dropup centered
|
Make the dropup menu centered above the toggle with
.dropup-center on the parent element.
|
Dropend
|
Trigger dropdown menus at the right of the elements by
adding .dropend to the parent element.
|
Dropstart
|
Trigger dropdown menus at the left of the elements by
adding .dropstart to the parent element.
|
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 .dropdown-menu-end to a
.dropdown-menu to right align the
dropdown menu. Directions are mirrored when using
Bootstrap in RTL, meaning
.dropdown-menu-end will appear on the
left side.
|
Responsive alignment
|
If you want to use responsive alignment, disable
dynamic positioning by adding the
data-bs-display="static" attribute and
use the responsive variation classes. To align right the dropdown menu with the given breakpoint or larger, add .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.
To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end and
.dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start. Note that you don't need to add a data-bs-display="static" attribute to
dropdown buttons in navbars, since Popper isn't used
in navbars.
|
Alignment options
|
Taking most of the options shown above, here's a small kitchen sink demo of various dropdown alignment options in one place. |
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 data-bs-offset or
data-bs-reference 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
autoClose option to change this behavior
of the dropdown.
|
withIcon
|
Use {icon} with
{dropdown-item} as per your requiremnts.
|
menuSizing
|
Use {menuSizing} with
{dropdown-menu} as:
.dropdown-sm, .dropdown-md,
.dropdown-lg, .dropdown-xl,
.dropdown-xxl
|
Theme
|
Use {Theme} with
{.dropdown} as like:
.dropdown-primary,
.dropdown-secondary,
.dropdown-success,
.dropdown-info,
.dropdown-warning,
.dropdown-danger, etc. Can use any
{$thems-colors} mapping colors.
|
ThemeSoft
|
Use {ThemeSoft} with
{.dropdown} as like:
.dropdown-soft-primary,
.dropdown-soft-secondary,
.dropdown-soft-success,
.dropdown-soft-info,
.dropdown-soft-warning,
.dropdown-soft-danger, etc. Can use any
{$thems-colors} mapping colors.
|
Documentations
|
Please visit: https://getbootstrap.com/docs/5.3/components/dropdowns/ |