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.

Loading...

Resources


Types

Menu default

Default

The default menu option treats each menu item as a button that initiates an action.

Menu checkbox

Checkbox

The checkbox menu option lets people select multiple items from the menu, like when filtering a list by multiple criteria.

Menu radio

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.

Menu with MenuGroupHeader

Group items to make them easier to scan

Menu with MenuDivider

Use a divider for more visual distinction between groups


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.

Text wrapping correct
Text wrapping incorrect

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.

Submenus

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.

Labels

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.

Sentence style capitalization

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.