Menu
A dropdown menu triggered by a button click. Supports keyboard navigation, disabled items, and dividers.
Basic Usage
With Disabled Items
Alignment
Mobile variant
By default, Menu renders as a dropdown on every viewport. Set mobileVariant="sheet" and on touch devices (coarse pointer) the menu instead opens as an ActionSheet anchored at the bottom — a much more reachable target for thumb-driven interaction.
<Menu mobileVariant="sheet">
<Menu.Trigger>
<Button variant="outline">Actions</Button>
</Menu.Trigger>
<Menu.Content>
<Menu.Item onClick={share}>Share</Menu.Item>
<Menu.Item onClick={archive}>Archive</Menu.Item>
<Menu.Divider />
<Menu.Item onClick={remove} danger>Delete</Menu.Item>
</Menu.Content>
</Menu>
Desktop layout is unaffected — the dropdown still anchors to the trigger.
Mobile considerations
mobileVariant="sheet"is recommended for menus with more than 3 items on mobile — thumb reach to a bottom sheet beats accuracy on a small floating dropdown.- All
Menu.Items meet the 44px tap target on mobile (vertical padding scales up automatically on coarse pointers). - Hover highlight is
@media (hover: hover)guarded so taps don't leave items in a stuck-hover state.
Menu Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Menu children (Trigger, Content) |
mobileVariant | 'dropdown' | 'sheet' | 'dropdown' | On touch devices, render as ActionSheet when set to "sheet" |
Menu.Trigger Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactElement | - | Trigger element |
Menu.Content Props
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'start' | 'end' | 'start' | Alignment relative to trigger |
children | ReactNode | - | Content children (Menu.Item, Menu.Divider) |
className | string | - | Additional CSS class name |
style | CSSProperties | - | Additional inline styles |
Menu.Item Props
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | () => void | - | Click handler |
disabled | boolean | false | Whether the item is disabled |
danger | boolean | false | Render as a destructive action (red) |
startIcon | ReactNode | - | Icon before the label |
children | ReactNode | - | Item content |
className | string | - | Additional CSS class name |