ActionMenu

ActionMenu is composed of ActionList and Overlay patterns used for quick actions and selections.

Page navigation navigation

The ActionMenu is an extremely versatile component that is not restricted to a single type of ActionList 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 ActionMenu, making it easier to navigate and understand. This allows users to quickly find and access the actions they need, while also providing a clear and organized structure to the menu.

Anatomy

ActionMenu opened with an internal `Settings` label. Several elements are emphasized, such as the trigger, actions, overlay menu, trailing visual shortcuts, trailing visual submenu indicator, and the 3 dot dialog indicator.

Content

Avoid input controls

The focus should always remain on menu items, and therefore the menu shouldn't include additional form elements like button, input, or checkbox.

Don’t

Don't add FormControls like a filterable input, use SelectPanel instead.

Icons

When designing menus, it is crucial to 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.

Don’t

Especially when providing single or multi select items that rely on a crossmark icon should be avoided as they could be confused with the item's checkmark.

Avoid the usage of icons if the icon conflicts with the selected states checkmark.

Don’t

Trailing visuals

Avoid using trailing visuals to add additional interactions, which reserves them for submenu indicators or keyboard shortcuts.

Create a new section for additional functionality.

Don’t

Multi-level

It's important to understand that menus can't include additional form elements like inputs.

Since you can't include form elements within a menu that also means that you can't combine a SelectPanel with a ActionMenu. Alternatively, you can open a Dialog.

If you want to present filterable data open a Dialog instead of a submenu.

Don’t

When using submenus, don't use the trailing visual to communicate selected values within its submenu. Leave this space for submenu indicators.

Use trailing visuals for submenu indicators or keyboard shortcuts.

Don’t

An ActionMenu with the first item in an inactive state. — ActionMenu with an inactive item

An ActionList with the first item in an inactive state. A cursor is hovering the alert icon in the leading visual slot. — ActionList with an inactive item

Inactive ActionList.Items appear differently when used in an ActionMenu.

Since inactive menu items must remain focusable, we cannot nest a focusable child to show a tooltip. To accommodate this limitation, we use a slightly different pattern than a regular list of items:

The text explaining the inactive state is displayed directly in the item, not in a tooltip.
No alert icon is needed, as the error message provides sufficient context.

See the ActionMenu accessibility documentation for more information.