Navigation

Breadcrumbs

A single-hop "where am I" indicator at the top of every detail page. Shows just the parent context + the current entity — never the full ancestor tree. Pairs with the back arrow in the Page header.

Overview

The breadcrumb lives in the page header's left region (.wiz-header-crumbs). It contains the parent link, a chevron separator, and the current page's h4 title. The user already knows how they got here — the breadcrumb just confirms parent context and gives them a one-click escape upward.

Use cases

  • Entity detail pages. Show parent collection (Workspaces) → entity name (Q3 Planning).
  • Wizards triggered from a context. Show origin (Workspaces) → current step ("New workspace").
  • Sub-views inside an entity. Show entity (Q3 Planning) → sub-view (Settings, Members).

Properties

ElementClassNotes
Wrapper.wiz-header-crumbsFlex row holding back arrow + parent link + chevron + current title.
Back arrow.wiz-header-backSingle arrow that mirrors the parent link — single nav target, two affordances.
Parent link.wiz-header-crumb-linkClickable text. Inherits link color; underlines on hover.
Separator<svg> with chevron-right14 px chevron in help-text grey. Don't use / or › characters.
Current page<h4> or .wiz-header-crumb-currenth4 for detail entities. The "current" span variant is for wizard step labels.

Best practices

  • Single hop only. Never render the full ancestor tree. Workspaces › Project › Sub-project › Task = noise. Use Workspaces › Task.
  • Always pair with the back arrow. Both jump to the same destination — the arrow is for muscle memory, the link for clarity.
  • Truncate long names. If the current title is long, allow it to wrap or get an ellipsis — never let the chrome push the right region offscreen.
  • Origin-aware on wizards. When a wizard can be launched from multiple modules, the parent crumb reflects where the user came from — not a generic global label.