Menu
Dropdown action menu with declarative items and eyebrow-styled group headers.
Use Menu to place secondary actions behind one compact trigger. Use header items to group related actions. Group headers use the shared eyebrow typography recipe.
Interactive example
Loading interactive example
API
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
children | Snippet | snippet | No | undefined |
items | MenuItem[] | prop | No | [] |
onOpenChange | (open: boolean) => void | callback | No | undefined |
onSelect | (item: MenuAction) => void | callback | No | undefined |
open | boolean | binding | No | false |
sameWidth | boolean | prop | No | false |
trigger | Snippet | Snippet<[Record<string, unknown>]> | undefined | snippet | No | undefined |
triggerIcon | IconGlyph | prop | No | DotsThreeIcon |
triggerLabel | string | prop | No | undefined |
triggerMode | 'delegated' | 'legacy' | never | prop | No | undefined |
Examples
Source
Loading source