components

DropdownItem

A single selectable row inside Dropdown or ContextMenu — never rendered standalone, since its onSelect/keyboard-navigation behavior only exists in relation to the menu it belongs to.

tsx
<DropdownItem>
  ...
</DropdownItem>

Examples

onSelect fires on click and on Enter/Space when the item has roving focus — one handler covers both mouse and keyboard activation:

tsx
<Dropdown trigger={<Button>Sort by</Button>}>
  <DropdownItem onSelect={() => setSort("name")}>Name</DropdownItem>
  <DropdownItem onSelect={() => setSort("date")}>Date</DropdownItem>
</Dropdown>

disabled skips the item during arrow-key navigation entirely, rather than leaving it focusable but inert — the same behavior a native <select>'s disabled <option> has.

Props

PropTypeDefaultDescription
disabledboolean
onSelectreadonly