Menubar
A bar of menus that stays on screen, as at the top of a desktop app: File, Edit, View.Document menus
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Menubar } from '@advui/core'
<Menubar aria-label="Document">
<Menubar.Menu>
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item shortcut="⌘N" onSelect={create}>New document</Menubar.Item>
<Menubar.Separator />
<Menubar.Item onSelect={print}>Print</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger>Edit</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item shortcut="⌘Z" onSelect={undo}>Undo</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>
</Menubar>Examples
Checkbox and radio items
View and format settings, and a menu that is disabled.Preview
Code
API reference
Menubar
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | — | Names the bar, e.g. "Document". Needed when a page has several. |
value | string | null | — | The open menu’s `value`, or null when all are closed, when you control it. |
defaultValue | string | null | null | The menu open at first, when the bar manages its state. |
onValueChange | (value: string | null) => void | — | Called when a menu opens, another takes its place, or all close (null). |
Menubar.Menu
One menu: its trigger in the bar and the items it opens.| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Identifies the menu for `value` and `onValueChange`. Generated by default. |
Menubar.Trigger
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | — | The menu cannot open, and the arrow keys skip it. |
Menubar.Content
| Prop | Type | Default | Description |
|---|---|---|---|
minWidth | '40' | '48' | '56' | '64' | '48' | Minimum menu width.Web only. |
Menubar.Item
| Prop | Type | Default | Description |
|---|---|---|---|
onSelect | () => void | — | Called when chosen; the menu closes. |
icon | ReactNode | — | Leading icon. |
shortcut | string | — | Keyboard hint on the right. It only shows the keys; handle them yourself.Web only. |
destructive | boolean | — | Style as a dangerous action. |
disabled | boolean | — | Skip this item. |
textValue | string | — | Type-ahead text when children is not a string. |
Menubar.CheckboxItem
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Checked state. |
onCheckedChange | (checked: boolean) => void | — | Called with the new state. |
Menubar.RadioGroup
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected item. |
onValueChange | (value: string) => void | — | Called with the chosen value. |
Menubar.RadioItem
| Prop | Type | Default | Description |
|---|---|---|---|
value required | string | — | Item value. |
Menubar.Label
A heading for the items after it.Menubar.Separator
A line between groups of items.Menubar.Group
Groups items under a Label for screen readers.Accessibility
- Web follows the WAI-ARIA menubar pattern: the bar has the
menubarrole and each trigger is amenuitemwitharia-haspopup="menu",aria-expandedand, while open,aria-controls. - The bar is one Tab stop: the trigger focused last, else the first. The arrow keys move between triggers and skip disabled ones.
- Focus moves into a menu opened from the keyboard, and back to its trigger after a choice or Escape.
- Items are Dropdown Menu’s:
menuitem,menuitemcheckboxormenuitemradiowitharia-checked, and type-ahead. - On iOS and Android each trigger is a button that reports whether its menu is expanded, and each row in the sheet is one accessible element at least 48pt tall.
| Key | Action |
|---|---|
| ← / → | Moves between triggers in the bar, wrapping at the ends. |
| Home / End | First / last trigger. |
| Enter / Space / ↓ | Opens the menu and focuses its first item. |
| ↓ / ↑ | Moves between items in an open menu. |
| ← / → (in a menu) | Closes it and opens the previous or next menu in the bar. |
| Enter / Space | Chooses the focused item. |
| A–Z | Type-ahead to an item. |
| Esc | Closes the menu and returns focus to its trigger. |
Responsive behavior
The bar does not wrap; keep it to a few short menus. Menus flip to stay inside the viewport.
Platform notes
Web
Menus open below their trigger. With a menu open, pointing at another trigger opens its menu, and pressing the open menu’s trigger closes it, as in desktop menu bars. Touch screens open and close menus on tap.
iOS
Each trigger opens its menu as a bottom sheet (Dropdown Menu’s), one at a time. Shortcut hints are hidden.
Android
Same as iOS; the back gesture closes the open sheet. With
androidRipple (on in material()), triggers and rows show the native ripple.