Overflow menu

Use an overflow menu when a space constraint makes it impossible to display all additional options in a horizontal layout, like a toolbar or table row. Overflow menus are commonly used when a UI switches from a desktop to a mobile device.

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

Toolbar overflow in desktop view

• Use overflow menus in desktop toolbars to contain additional, less primary actions that can't be displayed within the available horizontal space.

Toolbar overflow in mobile view

• Use overflow menus in mobile toolbars to contain all additional actions, including primary actions that would typically be visible in desktop views. This doesn't include filtering or sorting, which should remain available as buttons in the toolbar.

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

Table overflow in desktop view

Table overflow in mobile view

• 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 a label group with overflow.
• Do not use an overflow menu to hide additional content that you don't want to be seen by default, instead use an expandable section.

Overflow menus are represented by a button with a kebab icon (fa-ellipsis-v), which opens a horizontal list with additional options when selected.

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