Skip to end of banner
Go to start of banner

Action Menus

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 55 Next »

Description

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

Workspace menu

Data table column menu

General / data table row menu

Widget menu

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

State

Menu

Icon menu

Comment

Regular

Hover

Selected

In case of a toggle action

Disabled

Focused

When using the arrow keys to navigate between items

Focused, Hover

Focused, Selected

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:

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

Keyboard

Description

Tab

Navigates to the next action.

Shift + Tab

Navigates to the previous action.

Space

Applies the focused action and closes the menu.

Enter

Applies the focused action and closes the menu.

Esc

Closes the menu and returns the focus to the menu trigger without applying any action.

Arrows

  • Up - Navigates to the previous action. Stops at the first item in the list.

  • Down - Navigates to the next action. Stops at the last item in the list.

Holding down the key will scroll continuously.

Page Up/Home

Navigates to the first item.

Page Down/End

Navigates to the last item.

a-z, A-Z

  • Moves focus to the next menu item with a label starting with the typed character(s), if such an item exists.

  • Typing multiple characters in rapid succession moves the focus to the next menu item starting with the string of typed characters.

  • If no item labels match the typed character(s), the focus does not move.

Design

Zeplin link

Screen thumbnail

https://zpl.io/VxPedqm

Code

  • No labels