Breadcrumb — Cayuse Design System

Examples

Breadcrumb trail

html

<nav class="cds-breadcrumb" aria-label="Breadcrumb">
  <ol class="cds-breadcrumb__list">
    <li><a class="cds-breadcrumb__link" href="/sp">Sponsored Projects</a></li>
    <li aria-hidden="true" class="cds-breadcrumb__separator">/</li>
    <li><a class="cds-breadcrumb__link" href="/sp/proposals">Proposals</a></li>
    <li aria-hidden="true" class="cds-breadcrumb__separator">/</li>
    <li><span class="cds-breadcrumb__current" aria-current="page">Budget</span></li>
  </ol>
</nav>

Figma properties

Property	Values	Notes
`Part`	Link · Text · Separator	The three atoms the trail is built from.
`State`	Default · Focus	Applies to link parts.
`Site Level` / `Breadcrumb End`	text	Intermediate level labels and the final segment.
`1` – `4`	boolean	Which levels are shown on the assembled component.

Original Figma description & what changed

From Figma: Breadcrumbs are used to indicate to the user where they are in the Cayuse app.

What changed: Kept the meaning and added the half the original leaves out: a breadcrumb is not only an indicator, it is a control — the levels above the current one are links, and that is the point of it. Also added the relationship with Page Heading, since the Figma annotations note the two must not repeat the same text.

Usage

The Page Heading component carries a note worth repeating here: “Only have breadcrumb end if no Page Title — the Page Title and breadcrumb end would be the same text.”

When to use it

Use where the product has real hierarchy more than two levels deep.
Make every level except the last a link.
Mark the current page with aria-current="page" and do not link it.
Drop the final segment when the Page Title directly beneath already says it.

When not to use it

Do not use as a substitute for the browser’s Back button — a breadcrumb shows structure, not history.
Do not include a breadcrumb on a flat, single-level view.
Do not truncate the middle of the trail; if it is too long, the hierarchy is too deep.
Do not repeat the page title as the last crumb and as the heading.

Accessibility

Wrap in <nav aria-label="Breadcrumb"> so it can be found and skipped as a landmark.
Use an ordered list — the order is meaningful, and the list gives screen-reader users a count of the levels.
Separators are decorative: aria-hidden="true". Otherwise the trail is read as “Proposals slash 24-0117 slash”.
Mark the current item with aria-current="page", not by styling alone.

Tokens consumed

Token	Applied to	Resolves to
`--breadcrumb-link`	Link segments	`--primary-brand-color` → `#0076b6`
`--breadcrumb-text`	Current segment	`--color-black`
`--breadcrumb-separator`	Separator glyph	`--color-gray-500`