Navigation
input
Floating
Display

Menu

Temporarily presents a list of options and/or actions that floats above other UI elements

Code component(s): Dropdown

Menus consist of three types of sections, each containing one or more Menu Items) that can be infinitely combined (separated by Separators):

  • Action List
  • Single-Select List
  • Multi-Select List

Anatomy

Sub-components

Menu Item

There are three types of Menu Items (each of which can be configured to be disabled): Action Menu Item, Single-Select Menu Item, Multi-Select Menu Item

Action List

These are made up of Action Menu Items, each of which initiate an action when selected. Append an ellipsis to the end of action labels that open a Modal.

Single-Select List

These are made up of Single-Select Menu Items (exactly one option must be selected at all times)

Multi-Select List

These are made up of Multi-Select Menu Items (zero or more options can be selected)

Separator

Lists must be separated with a Separator

Guidelines

Keep titles concise when possible

Title wrapping is not supported, so long titles will be truncated

Related components

  • Modal