Description

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

Action menu examples:

General menu	Icon menu	Table header menu	Workspace 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.

• Action options may be divided into groups. In this case, a horizontal divider will be shown between the groups.

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.

Workspace menu

• A common example of an action menu is the workspace menu.

• The workspace menu appears on the top right corner and contains actions relevant to the entire workspace (e.g., 'reset workspace' action).

• Only one workspace menu exists for any page.

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.

Design

Code