Breadcrumb

Pro

The path to the current page, in Candor's theme: each parent is a link, the current page is plain text marked aria-current="page", and the whole is a labelled navigation landmark. It shows the trail the app gives it and nothing else; collapsed levels are shown as an ellipsis, never dropped without a sign. Nothing moves.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0 and 2.2.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/breadcrumb

Brings in: locale, locked, tokens, utils · npm: @base-ui/react@^1.9.0, lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/candor/ui/breadcrumb"

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#home">Workspace</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#billing" locked="You need billing access to open this.">
            Billing
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Invoices</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

No props.

Also takes the props of React.ComponentProps<"nav">.

<BreadcrumbEllipsis>

A "…" standing in for the levels of a Breadcrumb that are collapsed, with a label for screen readers.

No props.

Also takes the props of React.ComponentProps<"span">.

<BreadcrumbItem>

One level of a BreadcrumbList, holding a BreadcrumbLink or the current BreadcrumbPage.

No props.

Also takes the props of React.ComponentProps<"li">.

<BreadcrumbLink>

A link to an earlier level in a Breadcrumb.

Prop	Type	Default	Description
render	`useRender.RenderProp \| undefined`	—	Draws this element (a router link, say) with the breadcrumb's styles instead of an <a>: `render={<Link href="/runs" />}`. The element keeps its own children unless the link is given some.
locked	`string \| null \| undefined`	—	Why this level can't be opened right now. When set, it stays focusable and marked `aria-disabled`, following it does nothing, and the reason is shown on hover and focus and read to screen readers (see `Locked`). `null` or left out: unlocked.

Also takes the props of React.ComponentProps<"a">.

<BreadcrumbList>

The ordered list inside a Breadcrumb, holding its items and separators.

No props.

Also takes the props of React.ComponentProps<"ol">.

<BreadcrumbPage>

The current level in a Breadcrumb: not a link, and marked as the current page for screen readers.

No props.

Also takes the props of React.ComponentProps<"span">.

<BreadcrumbSeparator>

The mark between two levels of a Breadcrumb, hidden from screen readers; a chevron unless given children.

No props.

Also takes the props of React.ComponentProps<"li">.

Strings

The fixed words, in English by default. Change any of them under breadcrumb in <LocaleProvider strings={{ … }}>; the table is exported as breadcrumbStrings.

Key	English
label	Breadcrumb
more	More

Motion

Moment	Family	What it does
tint	tint	A link's colour changes when the pointer is over it, and a ring fades in when it takes keyboard focus. The current page is plain text and never changes.

Set with --cd-motion-breadcrumb-<moment>-* in your brand file; the families are in the design reference.