Skip to content

Breadcrumb

Hierarchical path navigation showing the user's location in the site.

Variants

Two separator styles cover every context. Choose chevron when the path feels more navigational.

VariantPurpose
SlashDefault separator. Clean, space-efficient, suits most catalog and content pages.
ChevronUse in data-dense or nav-heavy contexts where direction reinforces hierarchy.

Design tokens

TokenValueDescription
text/primary
#3b3b3d
Current page label
text/brand
#226558
Parent link text (default + focus)
text/brand/hover
#15483e
Link hover state (darkens, underlined)
text/tertiary
#aeaeae
Separator colour
typography/body/sm
14px / 20px
Breadcrumb text size

Guidelines

Do
  • Use on deep hierarchies (3+ levels)
  • Make every parent item a link
  • Keep labels short — one or two words per level
  • Place directly above the page title
Don't
  • Use breadcrumbs on top-level pages
  • Make the current page a link
  • Mix breadcrumbs with tabs as primary navigation
  • Show more than 5 levels — collapse middle items with an ellipsis