Menu
An always-visible list of actions or destinations, with icons, groups and a selected item.Mailbox navigation
Preview
Code
Mail
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Menu } from '@advui/core'
<Menu aria-label="Mailboxes" value={page} onValueChange={setPage}>
<Menu.Group label="Mail">
<Menu.Item value="inbox" icon={<MailIcon />} trailing={12}>Inbox</Menu.Item>
<Menu.Item value="sent" icon={<UploadIcon />}>Sent</Menu.Item>
</Menu.Group>
<Menu.Separator />
<Menu.Item destructive onSelect={emptyTrash}>Empty trash</Menu.Item>
</Menu>Examples
Actions in a card
Plain actions with a badge, a disabled and a destructive item.Preview
Code
API reference
Menu
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The selected item’s `value` (the current page or view). |
defaultValue | string | — | Starting `value` when uncontrolled. |
onValueChange | (value: string) => void | — | Called when an item with a `value` is chosen. |
aria-label | string | — | Names the menu for screen readers, e.g. "Mailboxes". |
Menu.Item
| Prop | Type | Default | Description |
|---|---|---|---|
children required | ReactNode | — | Label; truncated to one line. |
value | string | — | Selects this item when chosen. Leave it out for plain actions. |
onSelect | () => void | — | Called when the item is chosen. |
icon | ReactNode | — | Leading icon, sized and tinted for you. |
trailing | ReactNode | — | A count, Badge or hint on the right. Strings and numbers are muted text. |
selected | boolean | — | Force the selected look. Default: the menu’s `value` equals `value`. |
destructive | boolean | — | Style as a dangerous action. |
disabled | boolean | — | Skip this item. |
href | string | — | Render a link. On iOS and Android a path goes to the router registered with `setRouter`, and an absolute URL opens with the system. |
render | ReactElement | string | — | Your router’s link, e.g. `render={<Link href="/inbox" />}`.Web only. |
Menu.Group
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible heading that also names the group for screen readers. |
Menu.Separator
Accessibility
- The list is a
menuofmenuitems; name it witharia-label. Groups aregroups named by their label. - The selected item has
aria-current(pagefor links), disabled itemsaria-disabled. - On web the menu is one Tab stop: focus lands on the selected item, and arrow keys move between items, skipping disabled ones.
- Items are buttons, or links when they have
hreforrender, so Enter and Space work as expected. - On iOS and Android each item is one accessible element with a touch target of at least 48pt.
| Key | Action |
|---|---|
| Tab | Moves focus into the menu (to the selected item) and out again. |
| ↓ / ↑ | Next / previous item; wraps around. |
| Home / End | First / last item. |
| Enter / Space | Chooses the focused item. |
Responsive behavior
Fills its container’s width. Rows grow to finger size on touch screens; long labels are truncated.
Platform notes
Web
Items render as buttons, or as links with
href / render.iOS
Rows are 48pt tall. An item with
href follows it after onSelect: a path through the router registered with setRouter (since 0.15.0; before, href was web only).Android
Same as iOS. With
androidRipple (on in material()), presses show the native ripple.