Search the component library



A dropdown presents a list of options in a condensed space. Use a dropdown menu when the options are actions or navigation destinations. Use a standard select input in all other use cases.

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.

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.

Scrolling menu

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.


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 Basic UI Text 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
ScrollbarUse the native scrollbar
Height may be capped at different sizes depending on the content, prefer a height of 300px though
Triggersdropdown-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

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 Large UI Text style
The title is a Small Section UI Heading
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



  • ADDED: Feature to allow the menu to scroll for situations with many options
  • ADDED: Feature links


Initial Version