Action Menu

A versatile, contextual menu that’s activated by clicking another UI element, such as a button.

Healthy
Show details
Healthy
Published: February 02, 2024
Updated: February 21, 2024

Overview

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.

🟢 ActionMenu / Type=Basic

Design

 

Action Menu Item

  • A single action within the Action Menu
  • Menu items default height is 36px, but can the height can flex to fit their child contents
Action Menu item design

 

Types

  • Default: Used for most actions within an action menu like Edit, Copy, or View
  • Destructive: Used when the action is destructive in nature like: Delete, Archive, Disable
Action Menu item types

 

States

  • Inactive: default state
  • Hover: when an item is hovered
  • Active/Focused: when an item is clicked or selected
  • Disabled: when an action requires certain conditions before it can be clicked (this could be permissions, a particular state, or setting configuration not applied)

 

Options

Additionally, there are two types of items that can be included in a menu

  • Menu Title: While not commonly used in the product, this can help provide context for the menu’s origin and function (if there are multiple Action Menus within the same view)
  • Divider: Used to separate a group of actions in the menu. The most common application of this is separating Default actions from Destructive actions.
Action Menu Item Options

Action Menu Item Options

 

Properties

While the Menu item text is always required, additional menu item elements can be included.

Action Menu item props

Action Menu item props

  • Icon: used to help marketers quickly scan an Action Menu’s items for a particular action
  • Description (use with caution): used to help explain an action. This should be avoided if it’s a commonly used action and could be avoided by revising the menu item text.
  • Trailing badge: a badge that can help indicate the status of the item. This could be used to indicate if an action within a menu is still in “Beta”
  • Trailing text: a string of text that sits to the right-hand side of the menu item
  • Trailing icon: commonly used to indicate that by clicking that action, you’ll be taken to a new tab or page outside of Iterable (like the Iterable Support site); Another use could be to favorite/unfavorite an item
  • Has child (nested menu): used when the menu item is a parent grouping of actions that are within a nested menu that appears on hover
  • Checkbox (AVOID): the code Action Menu component currently includes this, but it’s use should be limited or avoided, as this menu is to function as a context menu for actions, not as a select to filter.

 

Action Menu

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.

🟢 ActionMenu / Type=Basic

🟢 ActionMenu / Type=Basic

🟢 ActionMenu / Type=Icon

🟢 ActionMenu / Type=Icon

  • min-width: 160px; max-width: 400px
  • box-shadow: --shadow-largeShadow
  • border radius: --borderRadius-component-menu

 

Placement

  • Menus should sit 4px from their trigger element.
  • Since most CTA buttons in our app sit in the top-right of the UI, the default positioning is below and right-aligned.
  • Child menus should be placed 4px from the parent Action Menu and top-aligned with the Action Menu Item that triggered the child menu.
  • Menus should respect the alignment of their parent, for example, a left-aligned menu trigger placed at the top of the page should have a left-aligned menu beneath it. A right-aligned trigger in the bottom-right should have the menu placed above and right-aligned with the menu trigger.

 

Animation

  • Menus entrance is conditional, based on the menu's alignment to its trigger.

Use entrance and exit easing.

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;

 

Guidelines

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.

  • Icons should not be repeated within the same menu; if the parent action is the same, for instance “View …” consider placing all items that share the action under a child menu
  • Avoid using icons that don’t clearly represent the action. For instance, avoid using an “eye” icon in an action list for “View analytics” where an icon representing data visualization is more appropriate.

 

Use cases

 

Action Menu triggered by a button

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.

Triggered by a button

 

 

Overflow menus in an index

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.

Overflow in an index

 

 

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.

Related actions

 

 

Overflow menus inside a resource

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.

Overflow menus inside a resource

 

Do's and Don’ts

 

Use the correct menu item type

Use destructive for delete/archive

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

Edit goes first

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

Avoid using 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)

If using icons, use in all menu items

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 additional colors to icons in menu item styling

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

Don't hide actions

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.

Consider number of items

 

Content

  • Menu items should follow this format: Action verb {{item}}
  • Action Menus should never have a horizontal overflow; lengthy Action Menu Items should be truncated within the container and the full name can be revealed in a tooltip on hover after a 300ms delay.
  • Avoid lengthy menu item text; the action should be communicated in 3 words or less
  • If using a description, limit the descriptive text to two lines or less. If more room is needed, consider adjusting the width of the menu until the description can fit into two lines

 

Accessibility

  • Focus Management: Ensure the first focusable element in the menu receives focus when pressing tab on the keyboard. When the popover closes, return focus to the element that triggered it.
  • Tab Order: Users should be able to navigate through all focusable elements within the Action Menu using the Tab key.
  • Escape Key: Allow users to close the Action Menu by pressing the Escape key.
  • ARIA Roles and Attributes: Use appropriate ARIA roles and attributes to convey the structure and purpose of the Action Menu. For example, role="dialog" for the Action Menu container and aria-haspopup for the trigger element.
  • Labels and Descriptions: Provide accessible names and descriptions for the Action Menu and its controls using aria-label, aria-labelledby, or aria-describedby.

 

Health

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

Healthy