Components

Navigation

The sidebar, in-page tabs, breadcrumbs and the top bar. The current page shows a brand-tint fill and indigo text. Tabs switch views within a page and use an underline.

Navigation
Foundations/Colour
<Tabs
  tabs={['Overview', 'Activity', 'Settings']}
  active="Overview"
/>

<Breadcrumb items={['Foundations', 'Colour']} />

Guidelines

Do
  • Show the current navigation item with a brand-tint fill and indigo text.
  • Use an underline indicator for tabs, which switch views rather than navigate.
  • Let a single indicator glide between items rather than blink.
Do not
  • Do not use a coloured side border for the active navigation item.
  • Do not confuse tabs with navigation. They do different jobs.