Dropdown Menu
A floating menu that appears on click, presenting a list of actions or options. Wrap any trigger element as a child and pass an items array to define the menu’s contents, including labels, shortcuts, separators, and danger states.
1<DropdownMenu items={items}>
2 <Button color="neutral">Options</Button>
3</DropdownMenu>
4
Usage
1import { DropdownMenu } from "atlas";
2
3const items = [
4 { label: "Edit", onSelect: () => {} },
5 { label: "Duplicate", onSelect: () => {} },
6 { type: "separator" },
7 { label: "Delete", danger: true, onSelect: () => {} },
8];
9
10<DropdownMenu items={items}>
11 <Button>Options</Button>
12</DropdownMenu>
13
Examples
Default
The default
DropdownMenu renders a floating menu triggered by its child element, with align="start".1<DropdownMenu items={items}>
2 <Button color="neutral">Options</Button>
3</DropdownMenu>
4
With shortcuts
Add a
shortcut string to any item to display a keyboard shortcut hint aligned to the right of the label.1<DropdownMenu items={[
2 { label: "Undo", shortcut: "⌘Z" },
3 { label: "Redo", shortcut: "⇧⌘Z" },
4 { type: "separator" },
5 { label: "Cut", shortcut: "⌘X" },
6 { label: "Copy", shortcut: "⌘C" },
7 { label: "Paste", shortcut: "⌘V" },
8]}>
9 <Button color="neutral">Edit</Button>
10</DropdownMenu>
11
Right-aligned
Set
align="end" to anchor the menu to the right edge of the trigger. Useful when the trigger sits near the right side of the viewport.1<DropdownMenu items={items} align="end">
2 <Button color="neutral">Options</Button>
3</DropdownMenu>
4
API Reference
| Prop | Type | Default |
|---|---|---|
| items | DropdownMenuItem[] | - |
| align | "start" | "end" | "start" |
| children | ReactElement | - |
- Button Group for combining a primary action with a dropdown trigger in a split-button pattern