Description
Description
Action menus are used for disambiguation, navigation, or to display secondary options. They appear when users interact with buttons, actions, or other controls.
A menu is a list of options presented to the user on a Popover.
Use action menus to present multiple actions, when a source’s (e.g. a button’s) single action would be ambiguous otherwise.
List options according to how frequent they're used. Don’t make users scan through a long list of disorganized options. To help users focus on what's relevant, place the options used most often at the top.
Limit the number of options within an action menu. Don’t overwhelm users with too many items. Keep the menu length manageable by including fewer than 10 options. Remember action menus may get bigger in mobile or touch devices.
All menu items trigger an action.
Menus can use a Bottom sheet mobile variant that provides room for additional items, longer descriptions, and iconography.
Keep action menu overlays simple. Don't use overlay headers and overlay footers alongside action menus.
Resources
Figma:
Prototype:
Screenshot
Components
ActionMenu
Behaviors
An ActionMenu component renders an ActionList containing ActionMenuListItems into a Popover.
ActionMenus should have the menu role.
ActionMenuListItem
Behaviors
An ActionMenuListItem component could be built on the ActionListItem component, to reduce props API surface area (i.e. so library consumers don’t need to use ActionListItem directly).
ActionMenuListItems should have the menuitem role.
Props
name: type (note: as noted in ActionListItem, variant would be consistent with Primer’s existing prop naming)
type: "default" | "danger"
default: "default"
description: Defines the list item type. (Passed through to ActionListItem.)
name: leadingVisual
type: React.ReactElement
description: An optional visual to accompany the list item. It supports octicons, avatars, or other custom elements. (Passed through to ActionListItem.)
name: text
type: string
description: The primary text in the list item. Use sentence case. (Passed through to ActionListItem.)
name: description
type: string?
description: A quick description of the list item. (Passed through to ActionListItem.)
name: descriptionType
type: "inline" | "block"
description: Defines how the description text will be placed in the list item. An inline description appears adjacent to the text prop, while block places it below in a new line. (Passed through to ActionListItem.)
name: auxiliaryText
type: string
description: An optional space for auxiliary text at the end of the list item. May be used to render keyboard shortcuts. (Passed through to ActionListItem.)
When rendering keyboard shortcuts, use the system default characters. On macOS, a keyboard shortcut may look like ⌘S. On Windows, Ctrl+S.
macOS: ⌘, ⌥, ⇧, ⌃
Windows: Ctrl, Shift, Alt
name: auxiliaryIcon
type: Icon
description: An optional space for an auxiliary icon at the end of the list item. (Passed through to ActionListItem.)