The menu button offers a set of options for an action, displayed in a menu.

Menu buttons – live examples

Menu buttons with semantics – live examples

Disabled menu buttons

When to Use

Use the menu button:

• To offer a group of options when there is no obvious default action.

Don’t use the menu button:

• To switch between different states. Use the toggle button or the switch instead.
• For individual actions without variants. Use the simple button instead.
• To offer a default action alongside a group of alternative options. Use the split button instead.

Anatomy

1. Background: Visualizes the state of the button using different colors.
2. Text: Describes the group of actions that can be triggered by the menu button.
3. Arrow: Indicates that clicking this button opens a menu with a group of options.

Variants

Three variants visualize different priorities of the menu button and its action:

• Primary
• Secondary (= regular)
• Tertiary

Primary menu button

Secondary menu button

Tertiary menu button

Behavior and Interaction

The menu button has only one interactive area. Clicking the menu button opens the menu with the possible actions.

Related Links