A simple component for presenting multiple options in a condensed space.
Usage Guidelines
Use this component when the options listed represent actions or navigation destinations. Prefer the standard select inputs for all other use cases.
Features
Opening a dropdown presents a simple list of textual options. These may be divided into logically related groups, and a single option may be indicated as selected with a checkmark.
Logically related options may be grouped together for easy scanning.
When a dropdown contains actions that edit some piece of data, you may use a checkmark to indicate the current state of the value being edited.
The various options for the dropdown menu. Options may be grouped, and checkmarks may be used when editing data.
Dropdowns should generally be indicated by UI Text or a button paired with an icon. Just the icon may be used if situated within an appropriate context like a course card or over a color picker.
If the trigger item is too far to the right the dropdown will shift to be right aligned.
The various trigger types available.
Menus are left aligned with the trigger unless there isn’t enough space.
At the extra small breakpoint, the dropdown switches from a menu that drops down to a modal that slides up with a list of options. For UI Text and button triggers the dropdown icon also becomes optional.
The dropdown page should have a descriptive title explaining the context for the options presented, although it is optional.
An example of a dropdown menu at the extra small breakpoint.
A mobile dropdown with a selection indicator.
Initial Version
Dropdown