Menu

The Menu component displays the list of action items that are revealed when the user clicks on the trigger element.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Keyboard accessibility and focus

Menu handles focus management out of the box. When the menu opens, focus moves to the first menu item; when it closes, focus returns to the trigger.

• Don't override the component's built-in focus handling. Focus must land on the first menu item when the menu opens, and return to the trigger on close, so screen readers can announce the state change correctly.

Accessible names and roles

• Do verify that the trigger's accessible name is descriptive and meaningful and matches any visible label.
• Do provide an aria-label for icon-only trigger buttons. It should describe what the menu contains or does.
• Do name every Menu.Group. Pass the label prop and the group is named for you, or render a Menu.Label inside the group and it becomes the group's accessible name automatically. Use aria-label when the group needs a name that isn't visible. See Groups and icons in the Overview tab for a code example.
• Don't add alt text if a visible button label is present. It would create redundant announcements.

State announcements

Menu handles state announcements out of the box: aria-expanded="true" when open; aria-expanded="false" when closed, ensuring that screen readers can announce the state change correctly.

• Do verify that revealed content has a meaningful accessible name if needed (the dialog title, for example).
• Do ensure that expanded menu content follows in a logical tab order so users can navigate into it after the state is announced.
• Do check that focus returns to the trigger when the content closes.