Dropdown

v1.1.0

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.

Dropdown menu
Dropdown Triggers
Responsive behavior
Redlines
Changelog

Features

Can be triggered by a link or button
Standard icon layout
Accessible

Dependencies

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

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.

Groupings

Logically related options may be grouped together for easy scanning.

Selected option

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.

In most cases you should avoid putting an excessive number of items in the dropdown menu. Occasionally the use case will require it (for example, a list of times in a time picker). If necessary, the length of the menu may be capped and a scroll bar will then allow access to all items.

The various options for the dropdown menu. Options may be grouped, and checkmarks may be used when editing data.

If the menu contains a significant number of items it may cap the height and use a scroll bar.

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.

Responsive behavior

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.

Redlines

Dimensions

Standard width is 220px

Spacing

16px top and bottom padding
24px left and right padding
8px between items

Focus/Hover

A focused or hovered item has a Moonlight background that extends 4px above and below the text
Triggers use the default focus behavior for buttons or links

Divider

Groups may be divided by a 1px solid Alto line
The divider line should have 12px between it and any text above/below it

Typography

Options use the Basic UI Text style

Checkmark

Uses the check-sm-18 icon
16px left padding around the icon
8px right padding
Text content is shifted right to make room for the icon (34px left padding)
This expanded spacing should be used any time it is possible for an option to be checked, i.e. don’t start with the narrower space and then shift text over to make room for a check mark

Border

1px solid Concrete
2px border radius

Alignment

Left aligned by default
Right aligned if there is not room within the viewport for the dropdown

Scrollbar

Use the native scrollbar
Height may be capped at different sizes depending on the content, prefer a height of 300px though

Triggers

dropdown-open-sm-18 for the icon if combined with text, use dropdown-open-sm-24 if standalone
Basic UI Text, for any text used
2px spacing between trigger and dropdown
Any button type is valid

Responsive redlines

Breakpoint

Use this style for the extra small breakpoint

Dimensions

Full viewport width and height (covering the header)

Spacing

List items have 24px padding on all sides
The title has 24px vertical padding
Close icon has a minimum of 12px left padding and 24px of right padding

Icons

Close icon is remove-lg-18
Check mark is check-sm-18

Typography

Options use the Large UI Text style
The title is a Small Section UI Heading

Colors

Title background is White Gray
Divider under title is 1px solid Moonlight
Divider within options is 1px solid Concrete

Check mark

The checkmark has 24px of left padding and 8px on the right
This pushes the options and any divider lines to the right, for a total right padding of 42px

Animation

The whole mobile menu should slide up from the bottom of the screen
Use a duration of 0.3s
Easing is cubic-bezier(0.77, 0, 0.175, 1)
Same transition for entry and exit