Navigation

Read about our dashboard design system and its visual components.

Version 1.0
Standard header stack

The standard header stack is separated into three layers, the main navigation, sub navigation, and page controls. The main navigation collapses content for mobile devices whereas the sub navigation is side scrolling. The page controls features the page title on the left with controls aligned to the right. Page control layer actions should generally only have one main action button. For secondary actions use the light button variant.

  • Do not change the order of the stack
  • Ensure there is only one primary call to action
  • Primary buttons must be full width on mobile

Policies

Mobile dropdown

On mobile devices the main navigation is collapsed down and menu opens as a dropdown. Menu items are stacked inside a two column grid to ensure the menu doesn't take up excessive vertical screen real estate. Long environment names should span full width and be truncated with ellipsis if it exceeds the viewport width.

  • Menu items are distributed across two columns
  • Environment names span full width
Sub navigation

There are two sub navigation menu style variations. Only apply the dark option if the sub navigation is sitting directly underneath the main navigation. Light option can have a light gray background or white with top and bottom card separating borders.

  • Only use the dark option underneath main navigation
  • Menu items can have full opacity active states