Overflow menu

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




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.


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.


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




The default state indicates that the overflitems are clickable or active.


While on hover over the area, it addresses the selectable area.


When in the focused state (while on the tab key), pressing enter will apply the relevant overflow-menu item contained within the overflow menu.


The active state is for while pressing the menu-item element.


When the action or item contained within an overflow menu item needs to be displayed as non-clickable.


It is used when expressing actions for permanent operations. For example: delete and remove actions.

Modifier (Types)


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



Overlfow menu can be triggered by inputs, split buttons and buttons. And it also has the potential to affect other components.


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


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.


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.


Overflow menu item label's must be a sentence case. Avoid using long labels.