Overflow menu

The overflow menu is for represents lists of commands and variable choices.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

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

  1. including a set of actions, filtering arrays, or items to choose (e.g tag-interactive/multiselect).
  2. grouping the possible actions or commands which they are secondary (or less) prominence.

Don't use when

  1. creating a selection group of options that are a static — or non-clickable item.

Structure

overflow-menu-structure
  1. An overflow menu item
  2. Overflow menu container
  3. Seperator

Properties

States

Default

The default state indicates that the overflitems 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 with 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. However, if the overflow menu is opened through a form input item, it should have the same width as the corresponding form input item and be centered within the component.

Height of an overflow-menu-item

Behavior

Interaction

Overlfow 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.

##image##

Contextual grouping

When using the overflow menu to arrange actions in order, overflow menu items can be listed contextually. For example, 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.

##image##

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. Pay attention to using one additional piece of information for each overflow menu item.

##image##

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. 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.