Dropdowns

Single Button Dropdowns

You can turn any button or link into a dropdown toggle with minimal markup changes, using the appropriate toggle class and menu structure.

Menu Alignment

Use the [--placement:bottom-right] class to position the dropdown menu on the right side of the element.

Custom Dropdown Arrow

Dropdown buttons can be customized to include or exclude icons, allowing you to create clean text-only toggles or visually enhanced ones with custom icons.

Split Button Dropdowns

Create split button dropdowns by pairing a regular button with a separate toggle. This layout provides quick actions on the main button and additional options in the dropdown.

Variant

Dropdown menus can be used with any button variant, allowing you to match different colors or styles such as primary, secondary, or success buttons.

Sizing

Dropdown menus can be paired with buttons of any size, including large, small, or split button variations for flexible design options.

Dropup Variation

Use the [--placement:top] or [--placement:top-left] class on the parent element to display the dropdown menu above the toggle button.

Dropstart Variation

Use the [--placement:left-start] class on the parent element to position the dropdown menu on the left side of the toggle button.

Dropend Variation

Use the [--placement:right-end] class on the parent element to display the dropdown menu on the right side of the toggle button.

Active Item

Use the .active class on a dropdown item to highlight it as the currently selected or active option.

Disabled Item

Use the .disabled class on dropdown items to indicate unavailable or inactive options within the menu.

Headers

Add a header inside the dropdown menu to group or label related menu items clearly.

Dark Dropdowns

Apply a dark theme to your dropdown menu by adding data-theme="dark" to the menu element. This helps match dark navbars or layouts without changing individual items.

Centered Dropdowns

Use the [--placement:bottom] or [--placement:top] class to position the dropdown menu centered below or above the toggle button.

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.

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.