01
Overview
Selectable item within a dropdown menu, supporting icons, labels, and keyboard navigation.
Usage
DropdownItem is a compose-only leaf of Dropdown.
The idiomatic API is Dropdown.Item, reached through the parent
namespace — see the dropdown README for the composed
snippet. The flat @lostgradient/cinder/dropdown-item subpath remains exported for
à-la-carte builds that import the leaf directly.
02
When to use
Use when
- Rendering an individual action or link row inside a dropdown-menu.
- Composing menu rows that should close the parent dropdown after selection unless closeOnSelect is disabled.
Avoid when
- Used outside a dropdown context — it requires the dropdown provider and will throw otherwise.
- Grouping a static heading row above menu items — use dropdown-label.
03
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
variant | 'default' | 'danger' | 'default' | Visual style of the item. Use danger to signal a destructive action. Default default. | ||
itemRole | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'menuitem' | ARIA role for the row. Use menuitemcheckbox or menuitemradio for selectable menu items. | ||
checked | boolean | false | Checked state for checkbox and radio menu items. Omitted for normal menu items. | ||
inset | boolean | false | When true, adds leading padding to align the item with items that have a leading icon or indicator. Default false. | ||
disabled | boolean | undefined | When true the item is inert: click is blocked and aria-disabled is set. | |||
closeOnSelect | boolean | true | When true, the parent dropdown closes after this item is activated. Default true. | ||
onclick | unknown | req | |||
onkeydown | unknown | req | |||
href | discriminated-union | ||||
children | snippet |