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 add an aria-labelledby or aria-label if you use Menu.Group to group items. 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.