Updated: July 16, 2024

Menu Button

ui5-menu | v1.0

Intro

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

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.

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.
Anatomy of a menu button
Anatomy of a menu button

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

Implementation

  • Menu
    (UI5 Web Components documentation)