Dropdown

A dropdown menu triggered by a button. Contains selectable menu items with optional disabled states. Supports keyboard navigation (Arrow keys, Enter) and closes on Escape or click outside.

Basic

A simple dropdown with selectable items and a disabled option.

With Icons

Menu items can contain any content, including icons.

Multiple Dropdowns

Multiple dropdowns can be placed side by side. Only one menu opens at a time.

Danger Action

Style destructive items with a danger color to warn users.

With Sections

Group items into sections with labels and separators.

Command Palette

Items with icons, section headers, and keyboard shortcut hints.

User Menu

A rich user menu with avatar header, grouped actions, and sign out.

Dropdown Props

Prop	Type	Default	Description
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for item hover and focus effects.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}
`--mantle-option-hover`	`CSS variable`	`gradient`	Override the item hover background via style. e.g. style={{ "--mantle-option-hover": "#3b82f6" }}
`--mantle-hover`	`CSS variable`	`gradient`	Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}

color"blue"

Accent color for item hover and focus effects.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

--mantle-option-hovergradient

CSS variable

Override the item hover background via style. e.g. style={{ "--mantle-option-hover": "#3b82f6" }}

--mantle-hovergradient

CSS variable

Override the hover background via style. Set to "none" to disable. e.g. style={{ "--mantle-hover": "none" }}

Dropdown.Item Props

Prop	Type	Default	Description
`onSelect`	`() => void`	—	Called when the item is selected.
`disabled`	`boolean`	`false`	Disables the menu item.

onSelect

() => void

Called when the item is selected.

disabledfalse

boolean

Disables the menu item.