Dropdown
Dropdown shows a menu of actions from its trigger, with submenus, groups and dividers. Choosing an item calls onSelect and closes the whole menu. The menu follows Floating UI’s nested menu pattern and uses the Popover surface.
Demos
Basic
By default it opens on hover below the trigger (on touch screens, on tap). trigger="click" opens it on click or Enter / ↓ and moves focus into the menu. Disabled items are skipped. showArrow adds an arrow pointing at the trigger (off by default; submenus never have one).
Submenus, icons and groups
An option with children opens a submenu to the right: on hover (the pointer can move diagonally into it without closing it), or with →; ← goes back. icon adds an icon, { type: "divider" } a line and { type: "group", label, children } a labelled group.
Context menu
With x / y and no trigger the menu opens at a point: a context menu. Drive it with show and trigger="manual".
Keyboard
↑ / ↓ move between items (skipping disabled ones, wrapping), Home / End jump to the ends, typing jumps to the next item starting with that letter, → opens a submenu and ← closes it, Enter or Space chooses, Escape closes the menu and returns focus to the trigger.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
options | DropdownMixedOption[] | required | Items { key, label, icon?, disabled?, children? }, dividers and groups. | Unreleased |
onSelect | (key, option) => void | undefined | Called when an item without a submenu is chosen. | Unreleased |
trigger | hover | click | manual | hover | What opens it. | Unreleased |
show / defaultShow | boolean | undefined / false | Controlled / initial visibility. | Unreleased |
onUpdateShow | (show: boolean) => void | undefined | Called when the menu wants to open or close. | Unreleased |
placement | PopoverPlacement | bottom | Where the menu opens; submenus open right-start. | Unreleased |
showArrow | boolean | false | Show an arrow pointing at the trigger; root menu only. | Unreleased |
size | small | medium | large | medium | Row height and text size. | Unreleased |
x / y | number | undefined | Open at a viewport point instead of next to the trigger. | Unreleased |
disabled | boolean | false | Never open. | Unreleased |
to / zIndex | As on Popover. | Unreleased | ||
onClickoutside | (event: Event) => void | undefined | Called on a press outside the trigger and the menus. | Unreleased |
Any other prop, and ref, goes to the trigger element.