UI Elements Action Menu Button

Updated: July 4, 2017
SAPUI5 Version 1.46

Menu Button

sap.m.MenuButton

Intro

The menu button differs visually from a regular button by featuring an expand icon, which triggers a dropdown menu (sap.ui.unified.Menu). By default, this menu is positioned below the button, but it can also be displayed above if there is not enough space.

Usage

Use the menu button if:

  • You need a menu that provides more than one option.

Do not use the menu button if:

  • The menu provides only one option. In this case, consider using a button instead.

Responsiveness

On smartphones (size S), the menu opens in a full screen dialog. The button label becomes the title of the dialog. The footer contains a Cancel button. Navigation is available with a Back button.

Menu button – Size S
Menu button – Size S

On tablet and desktop devices (Size M/L), the menu button triggers a cascading dropdown menu.

Menu button, split and regular mode – Size M/L and Size S
Menu button, split and regular mode – Size M/L and Size S

Layout

The menu button consists of a button with a label and an expand icon that indicates a menu.

The button has two different modes:

  1. Regular button mode (default): The menu button appears as a regular button. The user clicks or taps it to open a menu. In regular mode, you can use an icon in front of the label description.
  1. Split button mode: The menu button appears as a split button. The user clicks or taps the button to fire the menu’s default action, and clicking/tapping the arrow opens the menu.

The split button is separated into two areas: the label and the icon. The separator between them signals that the two areas result in different actions. The split button supports the emphasized, positive, and negative states of the regular button. The split button consolidates a set of command variations, especially when one of the commands is used more often.

In split mode, the label depends on the default action. If the default action is displayed with an icon only, all the menu items must contain icons.

For more information about cozy and compact modes, see content density.

Menu button layout in compact and cozy modes
Menu button layout in compact and cozy modes

Types

Regular menu button

Regular type (default): The user clicks/taps the button to open the menu.

Split menu button

The user clicks/taps the button to fire the default action. Clicking/tapping the arrow icon opens a menu.

Regular and split menu button types
Regular and split menu button types

Components

The menu button consists of a button with a label and/or icon and an expanding icon that indicates that a menu is available.

In split mode, the two basic elements – the label and the expanding icon – are separated.

Menu button components
Menu button components

Behavior and Interaction

On Tablets and Desktops

The menu button displays a dropdown menu (sap.ui.unified.Menu) as currently implemented.

  • If the user clicks/taps the menu button, it displays a dropdown menu.
  • If the user selects a menu item, the action is triggered and the menu closes.
  • The menu also closes if the user clicks/taps outside the menu, or if the user clicks/taps the button a second time while the menu is open.
  • The dropdown menu must be displayed in direct connection to the menu button.
  • The dropdown menu must be positioned below the menu button by default. If there is not enough space below, you may display it above the menu button.

On Smartphones

The menu opens in a full screen dialog. The button’s label becomes the title of the dialog.

  • To allow the user to navigate out of the menu, use a Cancel button in the footer.
  • Items with submenus become navigable. Navigation is similar to that used in a popover (sap.m.MessagePopover), in which a “back” button is provided.
  • When the dialog is reopened, it starts again at the top level.

Split Button

Clicking/tapping the label area triggers one of two types of behavior, which the app developer can configure individually:

  • It always triggers the default action set by the app developer. If no default item has been defined, the first item in the menu list becomes the default.
  • It triggers the last action chosen by the user. Initially, it is the default action until the user makes a different selection which then becomes default. The button label changes accordingly. The button has a fixed size and truncates the text if the menu item is longer (as with the combo box).

Expand Icon

If the user clicks or taps the expand icon, the dropdown menu opens.

Styles

The menu button supports all the states of the button (sap.m.button): emphasized, positive, and negative.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

  • No links

Implementation