action-menu

23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Action menu composition

An action menu comprises a set of action list items, where each item represents an action, command, submenu, or the current selection that can be either a single or multi-select. The action menu can be invoked by clicking on a button, icon button, or right-clicking on list items.

Action menu is versatile with multiple item types

The action menu is not restricted to a single type of action list items at a time. It can be used to create a combination of single select, multi-select, commands, and submenus. By using dividers and section titles, a hierarchy can be established within the action menu.

Recommended menu interactions

The following interactions are recommended: enter, click, or tap trigger an action or navigate into a submenu based on the selected item. Arrow left, arrow up, arrow down, and arrow right can be used to navigate the menu, allowing the user to move between items and submenus.

Open action menu from button or icon button

Action menus can be opened through a button, icon button, or by right clicking list items that have a custom context menu associated with them. Do not use a link to open a menu.

Close action menu

The menu will close when pressing the esc or tab key or when pressing enter when an item is focused. Additionally, clicking outside the menu or clicking on an item will close the menu.

Single select menu behavior

Single select menu closes upon selection and may update the button label.

Multi-select menu behavior

Multi select menu closes upon selection and can be re-opened to select more options.

Avoid input controls in action menu

The focus should always remain on menu items, therefore the menu should not include additional form elements like button, input, or checkbox. If you want to provide a filterable input, use select panel instead.

Use checkmark for selections, not checkboxes

Use a checkmark icon for selections in menus. Do not use form elements like HTML checkboxes within a menu, as the underlying semantics of menu selections are not true form elements.

Action menu alignment with select items

When a menu includes a single select or multi select, all the items in the menu should be indented to ensure consistent alignment of icons, titles, and trailing visuals. This consistency is critical to ensure that the menu is easily scannable.

Icon consistency in action menu

When designing menus, adhere to the meaning of the icons used. If any item in the menu does not have a corresponding icon, then all items in that menu should be presented without icons. Do not mix items with or without icons.

Avoid crossmark icons in select menus

Avoid using crossmark icons for single or multi select menu items, as they could be confused with the item's checkmark icon used to indicate selection.

Use dividers for menu readability

To enhance the readability of menus that contain numerous item descriptions, incorporate dividers. This can effectively prevent the menu from becoming overwhelming.

Trailing visuals reserved for submenus and shortcuts

Avoid using trailing visuals to add additional interactions. Reserve trailing visuals for submenu indicators (chevron-right) or keyboard shortcuts. Do not store additional toggleable functionality in trailing visuals.

Submenus in action menu

Submenus are only available in the React implementation. A menu with multiple levels allows users to access nested subitems without cluttering the screen. Menus cannot include additional form elements like inputs, so if you want to provide filterable data, use a select panel or open a dialog instead of a submenu.

Don't combine select panel with action menu

You cannot combine a select panel with an action menu because menus cannot include form elements. If you want to present filterable data, use a dialog instead.

Submenu trailing visuals and selection

When using submenus, do not use the trailing visual to communicate selected values within the submenu. Leave the trailing visual space for submenu indicators.

Action menu item types

Compatible action menu items include: Action (triggers an action or dialog with trailing visuals for keyboard shortcuts); Single/multi select (represented by a check icon, never an HTML checkbox, with trailing visuals for keyboard shortcuts); Submenu (represented by a chevron-right trailing visual); Section header (to add clarification to a section); Divider (to create sections for selections, actions, or submenus).

Inactive action menu items

If items in a menu have been affected by a system error such as an outage, they may be put into an inactive state with a message in each item explaining why it's disabled. The message explaining why it's unavailable is rendered in the item, not a tooltip, because hiding the message in a tooltip would require another user interaction. No alert icon leading visual is necessary since it would be redundant with the error message.

Disable action menu button when all items unavailable

If an action menu contains menu items that are very closely related and none of the menu items are available, then put the button that triggers the action menu into an inactive state.

Select menu is deprecated

Select menu is deprecated and usage is not encouraged. Users should use action menu or select panel instead.

Select menu CSS component only

Select menu is only available as a CSS component. It supports JavaScript-enabled live filtering, selected states, tabbed lists, and keyboard navigation with appropriate markup.

Select menu alternative components

Instead of select menu, GitHub recommends using action menu or select panel components.

Give your agent this brain