Dropdown Menu
A list of actions or options that opens from a button. Rows can carry an icon and a keyboard shortcut; destructive rows are red.
Actions menu
Arrow keys move, Esc closes.
<DropdownMenu
trigger={(p) => <Button variant="outline" {...p}>Actions</Button>}
items={[{ label: "Edit", icon: "edit", shortcut: "⌘E" }, "divider", { label: "Delete", destructive: true }]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | (props) => ReactNode | — | Render the button; spread the props onto it. |
items | (MenuItem | "divider")[] | — | Rows with label, icon, shortcut, destructive, disabled, onSelect. |
align | "start" | "end" | "start" | Edge to align to. |