Breadcrumb

Molecule

Hierarchical location indicator for deep navigation — the trail from the root to the current page. Mirrors Figma node 141-9432 (light) + 5942-1172 (dark) 1:1. Pure composition over foundation tokens — trail items use Body 1 Medium in --color-subheading; the current page reads as Body 1 Semi Bold in --color-heading. The separator is supplied by the consumer (SVG / glyph / character) so the same component handles thin chevron, slash, thick chevron, or any other affordance without needing modifier classes. No new tokens — every value flows through existing foundation tokens.

When to use

✅ Do

Use on pages that are 2 or more levels deep in the site hierarchy
Always make ancestor links clickable — only the current page is non-interactive
Keep labels short and match the destination page title exactly
Wrap in <nav aria-label="Breadcrumb"> for screen reader identification

❌ Don't

Use on the home page or other top-level pages — there is no hierarchy to show
Use more than 5 levels — simplify the navigation hierarchy instead
Make the current page item a link — it should be a non-interactive <span>
Use Breadcrumb as a substitute for the main navigation

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

A Breadcrumb trail is a list of items separated by a CSS-rendered separator. Only the last item (current page) is non-interactive.

1Nav wrapper — .breadcrumb. Flex row with role="navigation" + aria-label="Breadcrumb".
2Ancestor links — .breadcrumb-item as <a>. Clickable, in --color-subheading.
3Separator — .breadcrumb-sep. Supplied by the consumer (/, ›, ·). aria-hidden="true".
4Current page — .breadcrumb-item.breadcrumb-current as <span>. Non-interactive, aria-current="page", Semi Bold.

Default

A flat row of .breadcrumb-item links separated by .breadcrumb-separator elements, with a final .breadcrumb-current span marked aria-current="page". Wrap in <nav role="navigation" aria-label="Breadcrumb"> so assistive tech announces the landmark.

Separators

Three Figma-spec separators. The component doesn't care what's inside the .breadcrumb-separator slot — drop in any inline SVG or character. Thin chevron is the default. Slash is a plain text glyph. Thick chevron reads as a stronger trail when the page surface is busy. All three inherit --color-subheading via currentColor and scale with .breadcrumb-sm.

Chevron

Slash

Thick chev

Sizes

Two density tiers. Default .breadcrumb renders at Body 1 (16/24) Medium — matches Figma's documented size. .breadcrumb-sm drops to Body 2 (14/20) for tight surfaces (in-table breadcrumbs, modal headers). Separator icons step 16 → 14 px to track the typography.

Default

Small

States

Three states. Default renders --color-subheading. Hover on a .breadcrumb-item lifts to --color-heading (live via :hover; .is-hover forces it for the docs grid). Current page uses .breadcrumb-current + aria-current="page" — Body 1 Semi Bold in --color-heading. The current page is not interactive; render it as a <span>, not an anchor.

Default

Hover

Current

Composition

Breadcrumbs typically sit above a page title or a content surface, telling the user where they are in the hierarchy. Two common framings: under a page H1 on top-level pages, and at the start of a modal / drawer header for deep dives. The component is just a flex row — wrap it in whatever container the surface needs and the trail flows naturally.

Document 042

Above the H1 on a deep-link page.

Name	Status
Cases 2026 Discovery	Open
Templates Court filings	Archived

Responsive

On screens narrower than 744 px, .breadcrumb-item and .breadcrumb-current are capped at max-width: 30vw with text-overflow: ellipsis, so a deep path stays on a single line without wrapping. No extra class is needed — the rule is applied by the existing class names.

Frame above simulates a 390 px mobile viewport — long labels are clipped with an ellipsis.

HTML

<!-- No extra class needed — .breadcrumb-item and .breadcrumb-current
     truncate automatically below 744 px -->
<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="#" class="breadcrumb-item">Label</a>
  …
  <span class="breadcrumb-current" aria-current="page">Current</span>
</nav>

Accessibility

Attribute / Behaviour	Value	Notes
Nav wrapper	`<nav aria-label="Breadcrumb">`	Wraps the breadcrumb in a navigation landmark with a descriptive label
Current page	`aria-current="page"`	Set on the last, non-interactive breadcrumb item
Separator	`aria-hidden="true"`	The separator is purely visual — screen readers should skip it
Ancestor links	Standard `<a href>`	All ancestors must be real links, not `<button>` elements
Current page element	`<span aria-current="page">`	The current page is NOT a link — it describes where the user is, not where to go

API

Class / attr	On	Description
.breadcrumb	<nav role="navigation" aria-label>	Wrapper. Inline-flex row with `--spacing-xs` gap, Body 1 (16/24) Medium typography. Wraps on overflow.
.breadcrumb-sm	.breadcrumb	Small density — Body 2 (14/20) Medium typography. Separator icons step to 14 × 14.
.breadcrumb-item	<a>	Trail link. Body 1 / 2 Medium, `--color-subheading`, no underline. Hover lifts to `--color-heading`.
.breadcrumb-separator	<span aria-hidden="true">	Separator slot. Drop in an inline SVG (`#ico-chev-right-thin` / `#ico-chev-right-thick`) or any glyph character (e.g. `/`). Inherits `--color-subheading` via `currentColor`; mark `aria-hidden="true"` so screen readers skip it.
.breadcrumb-current	<span aria-current="page">	The final crumb. Body 1 / 2 Semi Bold, `--color-heading`, non-interactive. Render as a `<span>` (not an anchor) — the user is already here.
.is-hover	.breadcrumb-item	Documentation helper — forces the hover visual at rest. `:hover` handles the live state.
aria-current="page"	.breadcrumb-current	Marks the current page for assistive tech.
aria-label="Breadcrumb"	<nav>	Recommended on the wrapper so screen readers announce the landmark.
--color-subheading / -heading	Token	Foundation tokens — trail item / separator colour and current-page colour. Breadcrumb ships no own colour family; future foundation refreshes flow through automatically.