Patterns

Navigation

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

Main Nav

States

Hover
Selected

Show on hover

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

Main Nav hover

Responsive

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

Scrolling

Main Nav Small

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

Secondary nav

Secondary Nav

States

Hover
Selected

Accordions

From left to right: Standard accordion, hovered accordion, accordion with selected states
States
Hover
Selected
Parent with selected child
Behavior
  • 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

Scrolling

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.

SettingsNav

States

Static category header
Default link
Hover background
Selected background