Breadcrumb

Navigation trail shown inside <Topbar>. Located at apps/web/components/ui/breadcrumb.tsx.

Usage

Prefer passing breadcrumb via the Topbar prop:

<Topbar
  title="Marketing"
  breadcrumb={[
    { label: "Home", href: "/" },
    { label: "Projects", href: "/projects" },
    { label: "Marketing" },
  ]}
/>

The raw <Breadcrumb> primitive is also available if you need it outside a Topbar:

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Admin", href: "/admin" },
    { label: "Users" },
  ]}
/>

Visual

• Row height h-8
• Background bg-surface-2 (flat, no shadow — final decision after design iteration)
• Text text-xs
• Separator › (U+203A)
• Intermediate items colored text-text-muted with hover to primary
• Final item text-text-primary (no hover, not linked)

Items with icons

Breadcrumb labels can include an icon:

{
  label: project.name,
  icon: (
    <span
      className="w-1.5 h-1.5 rounded-full"
      style={{ backgroundColor: project.color }}
    />
  ),
}

Used for project color dots on the final item.

Rules

• Always start with Home or the top-level section (Admin, Engineer)
• Max depth 3 (Home › Section › Leaf). Going deeper hurts scan.
• Last item is never a link — it's the current page
• href on intermediate items is mandatory — don't break the back-navigation

Don't

• Don't show breadcrumb on login or onboarding pages — user has no back-nav context there
• Don't use breadcrumb for tabbed sub-navigation — use <Tabs> instead
• Don't add custom separators — always ›. Don't mix / or > or |.