Overflow menu

An overflow menu groups a set of actions into a responsive horizontal list to help declutter the UI.

Usage

Use an overflow menu when additional options are available to the user but there is a space constraint. Common usage for overflow menu's happen when switching a UI from a desktop to a mobile device.

When to use

  • Use an overflow menu in a table toolbar to group a number of actions and create visual space. Avoid having more than 3 actions fully displayed within a toolbar.
image showing toolbar overflow
  • Use an overflow menu within a table row when additional actions are available that don’t correspond with a column header.

    image showing table with overflow
  • Use an overflow menu within a card component to present additional menu options or provide action links.

    image showing card overflow

When not to use

  • Do not use an overflow menu when there are 2 or fewer actions available to the user.
  • Do not use in conjunction with label groups when there isn’t enough space to display each label. Instead, use an overflow label.
  • Do not use an overflow menu to hide additional content that you dont want to be seen by default, instead use an expandable section.

Behavior

Overflow menus are represented by a kebab button, as the user clicks on the kebab, a horizontal list will appear with additional options to click.

Content considerations

  • Text should be short and direct so users can quickly scan and decide on an action.
  • Text should be written in sentence case.
  • Overflow menus should be placed on the right side of the container.