A menu of choices with roving keyboard navigation (arrow keys, typeahead, Home/End) — for arbitrary interactive content instead, use Popover; for the same menu triggered by right-click instead of a visible trigger, see ContextMenu, which shares this file's list-navigation wiring.
tsx
<Dropdown>
...
</Dropdown>Examples
trigger plus a list of DropdownItems covers the common menu case — arrow keys and typeahead
work automatically once items are declared this way:
tsx
<Dropdown trigger={<Button icon="more-horizontal">Actions</Button>}>
<DropdownItem onSelect={() => rename()}>Rename</DropdownItem>
<DropdownItem onSelect={() => duplicate()}>Duplicate</DropdownItem>
<DropdownItem onSelect={() => remove()} disabled={!canDelete}>Delete</DropdownItem>
</Dropdown>matchTriggerWidth is what Select sets internally — it makes the menu
match the trigger's own width instead of sizing to its longest option, which is what a
combobox-style field needs but a plain action menu usually doesn't.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | readonly | — | `DropdownItem` elements. |
| defaultOpen | boolean | — | — |
| matchTriggerWidth | boolean | Matches the menu's width to the trigger's own width — for a Select-style combobox where the menu should align with the field, rather than sizing to its longest option. | |
| onOpenChange | readonly | — | — |
| open | boolean | — | — |
| placement | top | right | bottom | left | top-start | top-end | right-start | right-end | bottom-start | bottom-end | left-start | left-end | bottom-start | — |
| trigger * | readonly | — | A single focusable element that opens the menu on click. |