Breadcrumb

Shows the user's location in a hierarchy, and lets them navigate to ancestor pages. Aligned with J&J DS v1.2 — linked items in brand blue, current item in near-black medium-weight. The default separator is a forward slash; override via separator.

Default — slash separator

Figma DS pattern (node 11381:82227). Brand blue links, black current, forward slash separator.

Show source

<Breadcrumb
  items={[
    { label: "Breadcrumb", href: "#" },
    { label: "Breadcrumb", href: "#" },
    { label: "Breadcrumb", href: "#" },
    { label: "Breadcrumb", current: true },
  ]}
/>

With home icon

Pass `icon` on the first item to render an inline icon; any ReactNode works.

Show source

<Breadcrumb
  items={[
    { label: "Home", icon: <Icon icon={Home} size="xs" />, href: "/" },
    { label: "Design system", href: "#" },
    { label: "Components", current: true },
  ]}
/>

Custom separator (chevron)

Override the separator slot with any ReactNode — a chevron matches some long-scroll content surfaces.

Show source

<Breadcrumb
  separator={<Icon icon={ChevronRight} size="xs" />}
  items={[
    { label: "Studies", href: "#" },
    { label: "Enrollment", href: "#" },
    { label: "Daily", current: true },
  ]}
/>

Overflow

Mark a middle item with `overflow: true` to render an ellipsis in its place. Pair with your own overflow menu for long trails.

Show source

<Breadcrumb
  items={[
    { label: "Root", href: "#" },
    { overflow: true, label: "" },
    { label: "Leaf", current: true },
  ]}
/>

Truncation

Individual labels truncate after 240px via an inner span. Wrap the whole breadcrumb in a narrower container to see truncation in action.

Show source

<div style={{ maxWidth: 320 }}>
  <Breadcrumb items={[
    { label: "Studies", href: "#" },
    { label: "Very long sub-page name that should truncate", href: "#" },
    { label: "Leaf", current: true },
  ]} />
</div>