Overflow menu – Carbon Design System

CodeSandbox React Angular Vue Vanilla


    <OverflowMenu>
      <OverflowMenuItem
        itemText="Option 1"
        primaryFocus
      />
      <OverflowMenuItem
        itemText="Option 2 is an example of a really long string and how we recommend handling this"
        requireTitle
      />
      <OverflowMenuItem itemText="Option 3" />
      <OverflowMenuItem itemText="Option 4" hasDivider/>
    </OverflowMenu>


    <OverflowMenu>
      <OverflowMenuItem
        itemText="Option 1"
        primaryFocus
      />
      <OverflowMenuItem
        itemText="Option 2 is an example of a really long string and how we recommend handling this"
        requireTitle
      />
      <OverflowMenuItem itemText="Option 3" />
      <OverflowMenuItem itemText="Option 4" hasDivider/>
    </OverflowMenu>

General guidance

Overflow menu is used when additional options are available to the user and there is a space constraint.

Format

Text

The text within an overflow menu should be direct so users can quickly decide on an action. Actions that could cause a significant change to the user’s data (delete app, delete service, etc.) are separated by a horizontal rule and live below the primary set of actions.

An overflow menu with a significant action

Positioning

Depending on where the Overflow Menu appears within the UI, the caret or arrow may be left or right aligned so the Overflow Menu is clearly visible.

Edit this page on GitHub

Components: Number input

Overflow menu: Style