Is documented
The component is fully documented
The Action Menu component is a versatile, contextual menu that's activated via a button. It's designed to offer users additional actions or options relevant to the current context of the interface. This component helps in organizing actions that don't require primary placement on the interface, thus keeping the UI clean and user-friendly.
Action Menus are also used to create the Overflow Menus commonly seen on Index pages.
Additionally, there are two types of items that can be included in a menu
While the Menu item text is always required, additional menu item elements can be included.
The Action Menu component is a collection of menu items in a floating container. The menu floats above the basic UI but sits behind a modal or overlay. If used within a Modal, Take Over, or Slide Over, the Action Menu should sit on top of the interface.
enter-from, exit-to:
transform: scale(0.95);
opacity: 0;
transform-origin: top right; // conditional, based on the menu's alignment to its trigger
enter duration: 0.1s;
leave duration: 0.075s;
Menus can include a leading icon before the menu item to improve scanability. If a menu item with a leading icon is used, all menu items should also include an icon.
A common example of Action Menus triggered by a button is the Filtering button on Index pages. The button triggers the Action Menu, which can be closed by clicking outside of the Action Menu container.
Another example of this is the New Campaign or Template button, which opens an Action Menu that allows the Marketer to select the channel for that new resource.
Overflow menus are used within an index to allow the marketer to take actions on a resource within the table.
Overflows in the index are triggered by a Ghost Icon Button and should be placed in the last column to the right.
Consider the types of actions placed in this overflow and if the marketer should be able to complete the action without having the full details of the resource visible to them.
Related actions leverage the Button Group component and can be used when there is an action within a group of actions that is used more commonly, but there are alternative options that are related. An example of this is the Preview button within a campaign. The Preview button is the primary trigger that opens the Preview Take Over, but the icon button to the right provides additional options that are related to the primary action.
Overflow menus use the icon button component and house tertiary actions on that might not share any relationship with the buttons or actions visible on the primary UI.
Use the correct menu item type
Most actions will use the Default action menu item type, but when the actions are destructive in nature, they should use the Destructive action menu item.
Item order is important
The order in which the menu items are prioritized within the Action Menu is important. Common actions like edit or copy should be prioritized over destructive actions like archive or delete. If an action to Edit is available, it should always be the first action in the menu.
Avoid descriptions, if possible
Some action menu items may require additional explanation. If the action carries significant amount of risk, is complex, or there isn’t a confirmation behind the action, it’s good to include an item description. If an action needs more explanation, directing towards support or including a confirmation interstitial may be a better option.
When possible, try revising the title of the menu item so that the action is clear without the need for a description.
Use them or lose them (icons)
While icons are not required, they can be helpful when quickly scanning a list of action items.
If icons are used within a menu, all menu items should include icons.
Icons should never be repeated and should have a clear relationship with the item and the action—using generic icons that don’t have a strong relationship with the item can make them less useful.
Don’t modify styles
Avoid modifying the styles of the icons or the interactive states of the menu item.
Don’t hide actions if they’re not currently available
If a particular action is unable to be taken due to permissions, item status, or a specific set of conditions hasn’t been met, use the Disabled menu item state rather than hide the item in the menu.
A tooltip shown on hover can provide more context to why the action cannot be taken.
Consider number of action items and grouping related actions
Action menus have a max-height of 320px. This allows for six menu items and one destructive item to fit within the container view. Users should never have to scroll in an ActionMenu. Ideally less than 6 actions are available. If there are related actions, they can be grouped into a child menu. If nested, consider placement within the UI and test for collision awareness. Be sure to QA this at different display sizes to make sure the actions are still accessible.
Actions placed in the menu should be tested and validated using product data that suggests the action is a common action and should be accessible from the current view.
For instance, while product data may suggest that certain actions are taken quite frequently inside a campaign edit page, it may not make sense to show that action on the index if the marketer may need context of the campaign details to take the action.
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
Status
The component has a health status indicated