Spryker

Tabs

Contextual navigation between related views within the same page.

Variants

Tabs share a single visual variant — an underlined bar that highlights the active view.

VariantPurpose
DefaultHorizontal underlined tabs for switching between related views of the same entity.

Design tokens

TokenValueDescription
tab/text/default
#656565
Default label colour
tab/text/hover
#3b3b3d
Hover label colour
tab/text/active
#207264
Active label colour
tab/underline
#318272
Active underline colour
border/default
#cccccc
Base divider colour

Guidelines

Do
  • Use 2–7 tabs. Fewer is pointless; more is confusing
  • Keep labels 1–2 words in sentence case
  • Always have exactly one active tab at a time
  • Use icons consistently — all tabs with icons or none
  • Keep tab content related — the same entity viewed differently
Don't
  • Use tabs for page navigation — use links or a nav component
  • Use more than 7 tabs — switch to a side nav
  • Mix icon and non-icon tabs in the same bar
  • Use tabs to show a sequential workflow — use a stepper
  • Make tab content differ drastically in scope
PaginationSearch