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.
The default menu option treats each menu item as a button that initiates an action.
The checkbox menu option lets people select multiple items from the menu, like when filtering a list by multiple criteria.
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.
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
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
Menu with MenuGroupHeader
Menu with MenuDivider
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.
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.
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.
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.