Menu

Attribute	Description	Type	Accepted values	Default
trigger	the element that opens the menu, usually a `Button`	`ReactElement`	-	-
visible	open state, to control the menu	`boolean`	-	-
initialVisible	open state at the start	`boolean`	-	`false`
onVisibleChange	called when the menu wants to open or close	`(visible: boolean) => void`	-	-
getPopupContainer	element that receives the menu, `document.body` when missing	`() => HTMLElement`	-	-
...	native props, passed to the element around the trigger	`HTMLAttributes`	`'id', 'className', ...`	-

Menu.Item.Props

Attribute	Description	Type	Accepted values	Default
onClick	called when the item is chosen, by click or key	`(event) => void`	-	-
icon	shown before the label	`ReactNode`	-	-
shortcut	shown after the label, only for the eye	`string`	-	-
type	color of the item	`string`	`'default', 'error'`	`default`
disabled	the item cannot be chosen or focused	`boolean`	-	`false`
disableAutoClose	keep the menu open after the item is chosen	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'aria-keyshortcuts', ...`	-

Menu.CheckboxItem.Props

Accepts the props of Menu.Item, except onClick, plus:

Attribute	Description	Type	Accepted values	Default
checked	whether the option is on	`boolean`	-	`false`
onChange	called with the new state	`(checked: boolean) => void`	-	-
disableAutoClose	keep the menu open after the item is chosen	`boolean`	-	`true`

Menu.RadioGroup.Props

Attribute	Description	Type	Accepted values	Default
value	the value of the checked item	`string`	-	-
onChange	called with the value of the chosen item	`(value: string) => void`	-	-
...	native props, name the group with `aria-label`	`HTMLAttributes`	`'aria-label', ...`	-

Menu.RadioItem.Props

Accepts the props of Menu.Item, except onClick, plus:

Attribute	Description	Type	Accepted values	Default
value	the value this item checks in its group	`string`	-	-
disableAutoClose	keep the menu open after the item is chosen	`boolean`	-	`true`

Menu.Sub.Props

Attribute	Description	Type	Accepted values	Default
label	text of the item that opens it	`ReactNode`	-	-
icon	shown before the label	`ReactNode`	-	-
disabled	the submenu cannot be opened	`boolean`	-	`false`
...	native props, passed to the item	`HTMLAttributes`	-	-

Menu.Label and Menu.Divider

Both accept native props. Menu.Label is a title for the items below it, and Menu.Divider is a line between groups.

The ref of Menu points at the element around the trigger. The ref of each item, of Menu.Label and of Menu.Divider points at its own element, and the ref of Menu.Sub at the item that opens it.

Accessibility

The trigger gets aria-haspopup="menu" and aria-expanded. The list is a menu, named by the trigger, with menuitem, menuitemcheckbox and menuitemradio items. A radio group is a group; name it with aria-label. The shortcut is only visual: to announce it, pass aria-keyshortcuts, like aria-keyshortcuts="Meta+E".

Key	Action
Arrow Down and Up	On the trigger, open on the first or the last item. In the menu, move between the items
Enter and Space	Choose the focused item, or open its submenu
Home and End	Go to the first or the last item
Arrow Right	Open the submenu of the focused item
Arrow Left	Close the submenu and go back to its item
Escape	Close the submenu, or the menu and focus the trigger
Tab	Close the menu and focus the trigger
Letters	Go to the next item that starts with what was typed

Disabled items are skipped by the keyboard.

Edit this page on GitHub

General

Labels and dividers

Submenus

Checkbox and radio items

Controlled

APIs

Menu.Props