Menu
An accessible dropdown menu for the common dropdown menu button design pattern. Menu uses roving tabIndex for focus management.
Import
import {
Menu,
MenuItem
} from "@recastui/react";Usage
<div><Menu label='Open Menu'><MenuItem>Item 1</MenuItem><MenuItem>Item 2</MenuItem><MenuItem>Item 3</MenuItem></Menu></div>
Nested menu
Menus can be nested to create submenus. The MenuList component is used internally to wrap the menu items. The MenuButton component is used to wrap the menu button. The MenuItem component is used to wrap the menu item.
<Menu label="Edit menu"><MenuItem>Inflate</MenuItem><MenuItem>Deflate</MenuItem><MenuItem disabled>Tie</MenuItem><Menu label="Change color to"><MenuItem>Blue</MenuItem><MenuItem>Red</MenuItem><MenuItem>Green</MenuItem></Menu><Menu label="Pop with"><MenuItem>Knife</MenuItem><MenuItem>Pin</MenuItem><MenuItem>Fork</MenuItem></Menu><Menu label="Transform"><MenuItem>Move</MenuItem><MenuItem>Rotate</MenuItem><MenuItem>Resize</MenuItem></Menu></Menu>
Props
Menu
The Menu component is a wrapper around the MenuList component. It handles the rendering of nested menus.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| initialOpen | boolean | No | false | The initial open state of the Menu (optional). |
| label | ReactNode | Yes | - | The label of the menu item. |
| nested | boolean | No | false | Set to true if the menu is nested. |
| children | ReactNode | No | - | The menu items. |
| rootMenuIcon | ElementType | No | - | The icon to use for the root menu. |
| nestedMenuIcon | ElementType | No | ChevronRight | The icon to use for nested menus. |
| menuButtonProps | ButtonProps | No | - | Additional props to pass to the Button component of the menu. |
| className | string | No | - | Additional CSS class(es) to apply to the menu. |
MenuItem
The MenuItem component represents an individual item within a menu. It accepts all props that the Button component accepts.
Keyboard Navigation
The Menu components provide built-in keyboard navigation support to ensure a smooth user experience. The supported keyboard interactions are as follows:
- Enter / Space: Select the focused menu item.
- Arrow Up / Arrow Down: Navigate between menu items in the current menu level.
- Arrow Left / Arrow Right: (Nested menus) Open a submenu or move back to the parent menu.
- Home: Move focus to the first menu item.
- End: Move focus to the last menu item.
- Escape: Close the current menu or submenu.
- Tab: Move focus between menu items.
- Typeahead: Quickly navigate through menu items by typing the first few characters of the desired item.
These keyboard interactions are designed to follow the WAI-ARIA Authoring Practices for menus, ensuring a consistent and accessible user experience.
Accessibility
The Menu components follow the WAI-ARIA best practices for menu design. They include the following accessibility features:
- Keyboard navigation: Users can navigate through the menu items using the arrow keys, Home, and End keys.
- Focus management: When the menu is opened, focus is set to the first menu item. When a nested menu is opened, focus is moved to the first item in the nested menu.
- Typeahead: Users can type the first few letters of a menu item to quickly jump to it.
- Roles and ARIA attributes: The menu components use appropriate ARIA roles and attributes to ensure the menu is accessible to screen readers.
In addition, you should ensure that any icons you use within the menu components have appropriate aria-hidden and role attributes set to prevent screen reader issues.