Actions & Navigation
Menu
A menu displays a list of actions or options that a user can choose.
A menu displays a list of actions or options that a user can choose.
One
Two
Three
Four
Five
Separators#
One
Two
Three
Four
Five
Sections#
Introduction
One
Two
Three
Summary
Four
Five
Single select#
One
Two
Three
Four
Five
Multiple select#
One
Two
Three
Four
Five
Preselected#
One
Two
Three
Four
Five
Submenu#
Component props#
Menu#
| Name | Type | Description |
|---|---|---|
| selectionMode | SelectionMode | "none" | "single" | "multiple" |
| selectedKeys | string[] | Controlled selected keys |
| defaultSelectedKeys | string[] | Default selected keys |
| onSelectionChange | (keys: Selection) => void | Called when selection changes |
| variant | 'default' | 'plain' | plain drops the popup surface (border, shadow, background) when the menu is embedded in another popup, such as a Navbar dropdown |
With selectionMode="single" items render as radio items and with "multiple" as checkbox items, so
aria-checked is exposed to assistive technology.
MenuItem#
| Name | Type | Description |
|---|---|---|
| id | string | Unique item identifier |
| icon | ReactNode | Icon displayed before label |
| label | string | Item label text |
| isDisabled | boolean | Disables the item |
| showChecked | boolean | Shows the selected indicator. Defaults to true only when the menu has a selection mode |
| showSubMenuIcon | boolean | Shows submenu arrow icon |
| closeOnSelect | boolean | Whether picking the item closes the menu. Defaults to false for multiple selection |
MenuShortcut#
Renders a right-aligned keyboard hint inside a MenuItem.