The More Menu is a menu component that holds overflow actions a user can take in a given context.
Visual Examples
Usage
More menus are used in instances where all possible actions do not fit in a space visually, or where there are multiple actions a user could take on an item.
For tables: More Menus are placed in the far right column of each table row and contain actions related specifically to that row.
For cards: More Menus are placed in the top right corner of each card and contain actions related specifically to that card.
Principles
Consistent:More Menus throughout our design system should always be styled and interact consistently, regardless of the usage.
Dynamic:the options that appear in the use menu list is dynamic based on what permissions a client has on their account and also what actions are available in the context of the feature.
Informative: If an action is destructive to a user, a menu item should be styled in a way that informs the user of the destructive action.
Behavior of default More Menu Items
Default
When the More Menu Button is selected, the menu appears and menu items are Blue-20
Hover
On hover, the menu item row is highlighted Grey-20 and follows the styling of +Action Buttons.
Select
When selected, the action is taken. Any associated modals, full-page dialogues or toasts will appear depending on the action.
Behavior of destructive More Menu Items
Default
When the More Menu Button is selected, the menu appears and destructive menu items are Red-20.
Hover
On hover, the menu item row is highlighted Red-05.
Select
When selected, the action is taken. Any associated modals, full-page dialogues or toasts will appear depending on the action.
Definition
Visual Examples
Usage
Principles
Behavior of default More Menu Items
Behavior of destructive More Menu Items
Atomic Model Identification
Dos and Don'ts