Menu

The Menu component displays the list of action items that are revealed when the user clicks on the trigger element.

OverviewPropertiesUsage

Menu vs. Select

Menu

• Use a Menu to group related actions or navigational items in an overlay.
• Clicking one of the items triggers the event immediately—for example, if users can copy, edit, or delete a table item and you've grouped the actions in an Options button.

Select

• Use a Select if users should choose one or more options in an overlay from a predefined list of related items.
• Selects are form controls and don't necessarily trigger an event on selection immediately. For example, if users need to select a timezone in a form.

Content guidelines

General

• Use sentence case.
• Keep menu text to one to three words.
• Don't add periods or ellipses.
• Don't add trademarks or registered symbols.
• In general, leave out articles such as a and the. A concise, clipped style is appropriate for menus.

Types of items

• For actions, start with an active verb.
• For functions, use the function name.
• For links, use a noun that describes the linked page.
• When there are actions, functions, and links in a menu, group similar items together and add section divider lines. Consider adding section labels for context.

Tooltips in menus

• Be careful with menu tooltips. A tooltip shouldn't repeat the menu text. Instead, it should give additional, helpful information. The menu text must still make sense without the tooltip.
• Keep menu tooltips to one sentence and use simple, straightforward language. Add a period at the end of a tooltip.
• Don't put links in tooltips; they only appear if the user hovers.

Use of icons

• If you use an icon, choose one with the same meaning as the menu item.
• If you only use an icon and no text, add an arial-label for accessibility.