Menu
StableA list of actions or options that opens from a button: row overflow actions, view options, sort order. Supports icons, shortcuts, groups, checkable items and submenus.
When to use
Use it for
- More than two or three actions on one item: show the main one as a button and the rest in a Menu.
- View options: checkable items for columns, a radio group for sort order.
- A submenu for one level of grouping (Move to group, then the groups).
Not for
- Choosing a value for a form field: use Select or Combobox, which work with Field and forms.
- Navigation between pages: use links in the sidebar or tabs.
- Two actions: show both as buttons.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Destructive items last, after a separator
Distance from routine actions prevents slips. The danger tone backs up the verb.
Icons on all items or on none
Labels stay aligned either way, but a mix reads as noise.
Submenus inside submenus
Two levels deep loses keyboard and pointer users alike. Flatten with groups.
Accessibility
- Base UI Menu: the trigger has aria-haspopup and aria-expanded; the popup is role menu with menuitem, menuitemcheckbox and menuitemradio children.
- ArrowDown or Enter opens it and focuses the first item; arrows move, Home and End jump, typing a letter jumps to a matching item.
- Enter and Space activate; checkable items toggle aria-checked and keep the menu open.
- ArrowRight opens a submenu, ArrowLeft and Escape close it; Escape on the root returns focus to the trigger.
- Shortcut hints are visual only (aria-hidden); bind the shortcut yourself and document it elsewhere.
- Disabled items stay in the list so users learn the action exists, but cannot be activated.
Anatomy and tokens
Read from packages/react/src/components/Menu/Menu.module.css at build time. Every value is a token: open one to see its
alias chain in both themes.
- Positioning layer (layer.dropdown)
.positioner - Surface (popup.*)
.popup - Surface (popup.*)
.popup[data-ending-style] - Item (menu.item.*, height from menu.item-height density token)
.item - Item (menu.item.*, height from menu.item-height density token)
.item[data-highlighted], .submenuTrigger[data-popup-open] - Item (menu.item.*, height from menu.item-height density token), focus
.item:focus-visible - Item (menu.item.*, height from menu.item-height density token)
.item[data-disabled] - Danger tone
.danger - Icon or indicator slot
.leading - Shortcut hint
.shortcut - Submenu chevron
.chevron - Check or radio indicator (ink)
.indicator - Radio dot
.radioDot - Group label
.groupLabel - Separator
.separator
Props
Parsed from the TypeScript types in packages/react/src/components/Menu/Menu.tsx, so this table cannot drift from the
code.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | none | No description in the code yet. |
defaultOpen | boolean | none | No description in the code yet. |
onOpenChange | (open: boolean) => void | none | No description in the code yet. |
loopFocus | boolean | true | Wrap focus from the last item to the first. Default true. |
children | ReactNode | none | MenuTrigger and MenuContent. |
Comes with MenuRadioGroup, MenuGroup, MenuSeparator, MenuSubmenu, each accepting native <div> attributes.
Playground
Menu has no typed options to play with: it is a container. Compose it with MenuRadioGroup, MenuGroup, MenuSeparator, MenuSubmenu and any native attribute. Here it is in both themes.
Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Menu in Storybook) .
Embed Storybook stories here (5)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay
empty.
Actions
RowOverflow
CheckableItems
AllStates
AllStatesCheckable
Changelog
- New
Overlays: Dialog (sizes, scrolling body, footer, close last in focus order), AlertDialog (destructive confirmations, async confirm), Drawer (start, end, bottom with swipe), Popover, Tooltip with TooltipProvider, Menu (icons, shortcuts, groups, submenus, checkbox and radio items, danger items). Every popup carries the theme, brand and density scope. Adds menu and drawer component tokens.
Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026