Description

An action menu is a set of actions related to an element, component, or area of the application.

Workspace menu	Contextual menu	Icon menu

Workspace menu	Contextual menu	Icon menu
Open	Open

Usage & Behavior

General Guidelines

A menu can be triggered in one of these ways:

• Clicking a dedicated icon, for example, the More icon in a Data Table row.

• Right-clicking on a dedicated area on the screen.

• Selecting text, for example in a transcription.

Structure

Action menus consist of:

• A list of action options, shown inside a small container. There are three types of actions:

  • Simple actions, such as Copy. Represented by text, with or without an icon.

  • Complex actions, such as columns. Text followed by an ellipsis (…), with or without an icon. These open a new Dialog when clicked.

  • Toggle actions, such as Show working hours. Text with an associated check sign to show when it is selected.

• Dividers or group headers may also be used to organise the action options into groups.

Content

• The width of the options list should adapt to the longest option, up to a maximum width. Where options are too long they should be truncated with a tooltip displaying the full text shown on hover.

Placement and Positioning

Actions menus will appear:

• over the page, hiding any content behind it.

• to the right or left of the trigger element, depending on the location of the trigger element on the screen.

• below the trigger element, unless it is close to the bottom of the window. In this case, it will appear above.

Internal Logic

• Action options may be sorted by importance or popularity.

States

Interaction

• The user can navigate between items using the Up and Down arrow keys and select an item using the Enter key.

• Clicking an item can perform several actions:

  • Simple actions (such as Copy). The action is performed and the menu is closed.

  • Complex actions. A Dialog appears (e.g. for a column selector), and the menu is closed.

  • Toggle actions. The option is checked or unchecked. In most cases, the action is performed as soon the option is clicked (e.g. updating the view of a chart).

• Clicking outside the menu closes it without performing any action.

Best practices

Use:

• To show a small list of actions related to a single element.

Don’t use:

• If there are more than 10 action options → consider using a toolbar or a Ribbon.

• For selecting values → use a Drop-down Menu

General

• Keep option labels short and informative.

• Use right-click menus only as a second way to perform actions. The right-click option is hidden and may not be available for some users.

• Avoid mixing toggle action with other actions inside a single group.

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Focus management

Design

Code