Navigation is the primary method of accessing different sections of our app. Refer to this pattern when creating, adjusting, or implementing navigation.

Main Nav


HoverNeutral 1000
SelectedNeutral 700

Show on hover

On hover the Main Nav expands to it’s full size exposing labels to the user.

Main Nav hover


More information on main nav behavior at different screen sizes is available in our Layout package.


Main Nav Small

Overflow on small screens is represented by a shadow at the scrollable direction.

Secondary nav

Secondary Nav


HoverNeutral 1000
SelectedNeutral 700


From left to right: Standard accordion, hovered accordion, accordion with selected states
HoverNeutral 1000
SelectedNeutral 700
Parent with selected childBlue 700
  • On click, accordions toggle open and closed
  • A chevron icon is used to indicate the open/closed state of the accordion
    • Chevron pointing up is open
    • Chevron pointing down is closed
  • Multiple accordions can be opened and closed
    • Accordions work independently of other accordions
  • $Motion-ease--inout, $Motion-duration--medium
    • For more information on why we use these tokens see easing and duration


  • DO: Allow the entire navigation to scroll as one unit
  • DON’T: Do not create multiple, fixed scrollable areas on screen

Settings nav

The Settings Nav behaves just like the secondary nav. However, the Settings Nav looks intentionally different as an indicator to users that they are in settings.

The Settings Nav defaults to open every visit. For users who spend a significant amount of time in settings, the nav can be closed until the next page load.



Static category headerNeutral 900
Default linkBlue 700
Hover backgroundNeutral 200
Selected backgroundNeutral 0