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

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
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
Alignment
  • Left aligned by default
  • Right aligned if there is not room within the viewport for the dropdown
Triggers
  • dropdown-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

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
Colors
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

Changelog

1.0.0

Initial Version