Menu
A menu displays a list of contextual actions or choices anchored to a trigger.
Menus should expose a focused set of actions. Keep them short, predictable, and tied to the element that opened them.
Usage
Contextual Actions
Use menus for actions that relate to the current page, selected item, or nearby control.
Selection States
Use selected items to show the current choice and disabled items for unavailable options. Avoid hiding unavailable options when their presence helps explain the interface.
Content
Labels
Menu item labels should be concise and action-oriented. Start with a verb for commands, such as Edit, Share, or Delete.
Grouping
Group related actions with dividers. Keep destructive actions visually separated and place them after common actions.
Length
Keep menus short enough to scan quickly. If the list grows long or needs filtering, use a fuller selection pattern instead of a menu.
Behavior
- Open the menu from a clear trigger and anchor it to that trigger.
- Close the menu after an item is selected or when focus moves away.
- Use
disableScrollLockandmarginThreshold={null}in these docs so opened menus stay aligned during page scrolling. - Keep keyboard navigation intact by using MenuItem inside Menu or MenuList.
