To help users select from a number of choices, we can organize the options under a menu button. Sometimes we call this a dropdown menu. This button has one function: to reveal the dropdown menu choices. Users then make their selection from the options that appear.

Usage

We use a menu button when:

  • There isn’t a primary action.
  • We need to present two or more actions the user can choose from.

Users need to select an action for the button to do something, such as change items on the page or launch a new flow.

For example, on the sales transactions page, users can create many types of items. There’s no primary item, so the choices are listed under the “Create new” parent button.

If you need to present a button and there is a primary action, consider using the combo button.

Appearance and behavior

The menu button contains a single click target consisting of a label and arrow. The label represents the category of items contained in the menu.

Primary menu button

Disabled/ Default/ Hover, Active/ Expanded/ Expanded hover

Secondary menu button

Disabled/ Default/ Hover, Active/ Expanded/ Expanded hover

Appearance

  • The button displays the current state along with a down arrow that houses a single click target.
  • The button includes a label that represents the list of items contained in the menu.
  • The button can either be a primary or secondary action.
  • The menu button doesn’t include a primary action.

Behavior

  • When a user interacts with the button, the list of items appear directly underneath the button.
  • Pressing an item dismisses the menu and updates the button to display the new state.
  • Scrolling within the dropdown behaves the same way a menu scrolls.
  • An action must be selected for the button to do something, such as change items on the page or launch a new flow.
  • For the case where the button is near the viewport bottom, then the dropdown list will display above the button.

Content guidelines for menu buttons

  • Use sentence case. It’s OK to use title case for proper nouns (Brad Smith), branded products (QuickBooks ProAdvisor), and official things like Board of Equalization.
  • Don’t use punctuation.
  • Start with an action verb.
  • Keep it short. Two words is optimal (verb + noun = Create project / Start now / Send email).
  • Describe what actually happens when people use the button. Avoid Next or Continue when a more specific word will do (Select, Start, Sign up). Never say Submit.
  • Never write “click here.” If instruction text is needed, use the verb “select.”
  • Recommended voice and tone attribute: straightforward

Examples

Default

 

Expanded

Launch Preview
x
px wide

Do

  • Use when you have a list of options.

Don't

  • Display a menu with only one option.
  • Use as part of a form.
  • Was this Helpful?
  •