Menu Preview
A menu is a hidden list of options that is shown when someone interacts with a trigger component, like a button, an avatar, or an icon.
Usually, the options in a menu initiate an immediate action or navigate someone to a new context. If you need to collect information from people, try a select, dropdown, or combobox instead.
Resources
Types
Default
The default menu option treats each menu item as a button that initiates an action.
Checkbox
The checkbox menu option lets people select multiple items from the menu, like when filtering a list by multiple criteria.
Radio
The radio menu option lets people select one menu item that turns a setting on or off, like sorting a list by one criterion or applying a text formatting style.
Layout
Grouping options
Options in a menu should be listed in an order that makes sense, like most frequent actions first or most dangerous actions last. Consider using the MenuGroup and MenuGroupHeader components to logically group different types of actions.
If you don’t need section headers and want to use dividers only for visual separation, use the MenuDivider component.
Menu with MenuGroupHeader
Menu with MenuDivider
Behavior
Text wrapping
Menus have a max width of 300 pixels. By default, menu items that have long labels will wrap onto the next line if they go over this width. One menu item on multiple lines may cause confusion when scanning a long list, so avoid long labels.
Submenus
Sometimes, an option in a menu can open additional related options in a new submenu. In these scenarios, be sure to add an aria-label to the trigger component for people who use screen readers.
It’s best to avoid nesting too many menus whenever possible since they can be difficult to invoke and make it hard to remember the original context.
Content
Labels
Keep menu item labels brief. For menu items that trigger actions, use verbs that will reflect what will happen when someone selects that item.
For menu items that represent options or settings, a noun or short phrase is best. Use sentence-style capitalization and skip the period. For more info, see Capitalization and Periods in the Microsoft Writing Style Guide.
Secondary content
The secondary content slot should only be used to provide keyboard shortcuts that will have the same result as selecting the item from the menu. For more info, see Keys and keyboard shortcuts in the Microsoft Writing Style Guide.
