Menu buttons

Menu buttons with semantics

Disabled menu buttons

Do

Use the menu button:

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

Don't

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.

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.

Anatomy of a menu button

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