Dropdown
Search the component library

Dropdown

v1.0.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.

Features

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

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.

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.

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

DimensionsStandard width is 220px
Spacing16px top and bottom padding
24px left and right padding
8px between items
Focus/HoverA 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
DividerGroups may be divided by a 1px solid Alto line
The divider line should have 12px between it and any text above/below it
TypographyOptions use the UI Text - Basic style
CheckmarkUses 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
Border1px solid Concrete
2px border radius
AlignmentLeft aligned by default
Right aligned if there is not room within the viewport for the dropdown
Triggersdropdown-open-sm-18 for the icon if combined with text, use dropdown-open-sm-24 if standalone
UI Text - Basic, for any text used
2px spacing between trigger and dropdown
Any button type is valid

Responsive redlines

BreakpointUse this style for the extra small breakpoint
DimensionsFull viewport width and height (covering the header)
SpacingList 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
IconsClose icon is remove-lg-18
Check mark is check-sm-18
TypographyOptions use the UI Text - Large style
The title is a UI Heading - Section - Small
ColorsTitle background is White Gray
Divider under title is 1px solid Moonlight
Divider within options is 1px solid Concrete
Check markThe 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
AnimationThe 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

Changelog

1.0.0

Initial Version