Navigation

Page header

The .fr-header sits at the top of every view — 48 px tall, frosted-glass surface, hairline bottom border. Three canonical left-region variants (Title · Breadcrumb · WizardCrumbs) all share an identical right region: Quick Create · Copilot · Bell · Help · Avatar.

Overview

One header chrome, three left-region variants. The right region is identical across every page so users always know where to find the global actions. The variants differ only in what sits on the left: a plain title for list pages, a breadcrumb for entity detail pages, a wizard breadcrumb with step pills for multi-step flows.

Use cases

  • List pages. Use the Title variant — just the page name, no parent context.
  • Detail pages. Use the Breadcrumb variant with parent context, entity title, items chip, status pill.
  • Multi-step flows. Use the WizardCrumbs variant with origin crumb + step pills showing progress.

Properties

ElementClassNotes
Header shell.fr-header48 px tall, frosted background, hairline bottom border.
Left region.leftHouses the variant content (title / breadcrumb / wizard crumbs).
Right region.rightGlobal actions. Order is fixed: Quick Create → Copilot → Bell → Help → Avatar.
Back arrow.wiz-header-backRequired on Breadcrumb + WizardCrumbs variants.
Crumb link.wiz-header-crumb-linkParent context link — single hop only.
Crumb current.wiz-header-crumb-currentNon-link text for the current step (WizardCrumbs).
Step pills.wiz-header-stepsWraps .wiz-step-pill elements with chevrons between them.

Variants

VariantUsed onLeft contents
TitleList pages (Workspaces, Projects)Just an h4 page title — no parent context.
BreadcrumbEntity detail pagesBack arrow + parent link + entity h4 + items chip + status pill.
WizardCrumbsMulti-step flowsBack arrow + origin crumb + current step + step pills.

Best practices

  • One variant per view. Don't mix variants — every page commits to one shape so users learn the chrome once.
  • Breadcrumb = single hop. Show parent → current only. Don't render the full ancestor tree — it's noise and the user already knows how they got here.
  • Right region is sacred. Always Quick Create → Copilot → Bell → Help → Avatar, even if a page doesn't need one of them (hide via permission, not reorder).
  • Status pills belong inline. On detail headers, the status pill sits to the right of the entity title — never in the right region.

Composition

Detail headers carry additional contextual chrome — see Button for the panel-trigger icons that often sit beside the status pill, and Status pill for the status dropdown that doubles as a workflow control.