Design
Web component
Is documented
Status
Healthy
Figma component
The overflow menu is for represents lists of commands and variable choices. They appear when users interact through a button or a form input. Each menu item can initiate an action or switch between variable options.
Principles
Use when
- including a set of actions, filtering arrays, or items to choose (e.g tag-interactive/multiselect).
- grouping the possible actions or commands which they are secondary (or less) prominence.
Don't use when
- creating a selection group of options that are a static — or non-clickable item.
Structure
- An overflow menu item
- Overflow menu container
- Separator
Properties
States
There is no specific state definition for an overflow menu. Instead, the overflow-menu-item that belongs to the group has state values in Figma components.
|
Default |
The default state indicates that the overflow-items are clickable or active. |
|---|---|
|
Hover |
While on hover over the area, it addresses the selectable area. |
|
Focus |
When in the focused state (while on the tab key), pressing enter will apply the relevant overflow-menu item contained within the overflow menu. |
|
Active |
The active state is for while pressing the menu-item element. |
|
Disabled |
When the action or item contained within an overflow menu item needs to be displayed as non-clickable. |
|
Destructive |
It is used when expressing actions for permanent operations. For example: delete and remove actions. |
Modifier (Types)
|
Button |
If an overflow menu lists a set of actions related to a record or action, this overflow menu should be opened through a button. |
|---|---|
|
Form input item |
When overflow menus are needed to enable a list of options for generating or processing the callback related to a record, they should be presented through a form input item. These options can be a single or multi-selection. |
Positioning & Sizing
The positioning of an overflow menu is linked to the component that triggers its opening.
For example, if it is opened through a primary or split button, the overflow menu must be aligned to the right of the button if the button is right-aligned within its container or card.
However, if the overflow menu is opened through a form input item, it should match the width of the corresponding form input item and be centered within the component.
Behavior
Interaction
Overflow menu can be triggered by inputs, split buttons and buttons. And it also has the potential to affect other components.
Scrolling
The overflow menu can contain multiple items. However, in case the number of items exceeds the available height, there should be an overflow-menu scroll position after the 5th or 6th item. Additionally, the item that requires scrolling must be partially displayed to indicate that the menu is scrollable.
Contextual grouping
When using the overflow menu to arrange actions in order, overflow menu items can be listed contextually.
Do
when arranging common actions for a record (such as edit, delete, archive), danger items should be grouped together. In terms of meaning, the item associated with the least danger should be positioned at the bottom.
Do
Using section labels for the overflow menu can also help group queries into context groups.
Additional info for each item
Overflow menu items can also display their own meta-info, such as images, related record types, and more. In cases where it's necessary, there are limited ways to display this kind of information.
Do
Preview informations that are related with records listed on the overflow menu.
Do
You can use badge’s if there is a preview for record with it’s informations.
Icon usage
When using icons for an overflow-menu-item depends on its intended function. For instance, in an overflow menu list, if the items represent a state or semantic mean of the label, the icon is positioned on the left.
However, if it serves as a directional action within the current flow, the icon is placed on the right (this rule doesn't apply to overflow menus; please refer to the button for more info).
It is recommended to avoid using complex and detailed icons whenever possible.
Do
Choose icons that related and imply all the actions listed especially on the (action) menus.
Don’t
If an icon is required for one item in the menu, icons should also be used for the rest of the menu. An individual overflow-menu-item cannot have its own icon only.
Content
Overflow menu item label's must be a sentence case. Avoid using long labels.