ActionMenu

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

Edit in Figma

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.

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.

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.

Trailing visuals

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

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.

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