On this page

Actions & navigation

Breadcrumb released

The trail to the current page, told in links, with the page itself at the end of it.

Import@pacit/components/breadcrumb
Selectorspct-breadcrumb, pct-crumb, a[pctCrumbLink]

Implements the W3C ARIA APG Breadcrumb pattern ↗

import { Component } from '@angular/core';
import {
  PctBreadcrumb,
  PctCrumb,
  PctCrumbLink,
} from '@pacit/components/breadcrumb';

/** A trail of real links; the current page says so with `aria-current`. */
@Component({
  selector: 'demo-breadcrumb',
  imports: [PctBreadcrumb, PctCrumb, PctCrumbLink],
  template: `
    <pct-breadcrumb ariaLabel="You are here">
      <pct-crumb><a pctCrumbLink href="#home">Home</a></pct-crumb>
      <pct-crumb><a pctCrumbLink href="#library">Library</a></pct-crumb>
      <pct-crumb>
        <a pctCrumbLink href="#data" aria-current="page">Data</a>
      </pct-crumb>
    </pct-breadcrumb>
  `,
})
export class BreadcrumbDemo {}

breadcrumb.demo.ts — the same file runs here and is highlighted under Code

Start here

Usage

One import per component, and the shortest possible use — the package itself is installed once, on the start page.

Import this component

import { PctBreadcrumb, PctCrumb, PctCrumbLink } from '@pacit/components/breadcrumb';

Exported	What it is
`PctBreadcrumb`component`pct-breadcrumb`	A breadcrumb: the way here, told in the platform's own links.
`PctCrumb`component`pct-crumb`	One step of the trail: `role="listitem"`, and the separator drawn before its content.
`PctCrumbLink`component`a[pctCrumbLink]`	The trail's link, standing on the consumer's own anchor.

<pct-breadcrumb ariaLabel="You are here">
  <pct-crumb><a pctCrumbLink href="/">Home</a></pct-crumb>
  <pct-crumb><a pctCrumbLink href="/data" aria-current="page">Data</a></pct-crumb>
</pct-breadcrumb>

Examples

Every state, running

Each example is the component itself, not a screenshot. Open the code under any of them.

A long way here

The trail is an ordered list of links; only the last crumb carries aria-current="page", and it is a link like the others so the current page is reachable by keyboard too.

API

What it reads, and what it writes back

Read from the source at build time — the types, the defaults and the lines of documentation are the library's own.

A breadcrumb: the way here, told in the platform's own links.

Inputs

Name	Type	What it does
`ariaLabel`default `''`	`string`	The accessible name of the landmark. Overrides `texts().breadcrumbLabel`, whose job is only to carry a sensible default in the application's language.

Outputs

None of its own. The native events — (click), (focus), the form's submit — are the platform's, and two-way models above carry the rest.

What it writes on the element

The hooks a stylesheet or a test can hold. Stable by contract — the parts inventory gate fails the build when one disappears.

Attribute	Bound to	Note
`class`	`pct-breadcrumb`
`role`	`navigation`	A named `navigation` landmark — the pagination's reasoning one component over: the landmark is how a screen-reader user reaches the trail and steps over it, and it has to be named because two trails on one page are two landmarks.
`aria-label`	`ariaLabel() \|\| texts().breadcrumbLabel`

Styling

Parts to select, tokens to override

Two ways in, both stable. No class names to depend on.

Parts

In a test, PctBreadcrumbHarness, PctCrumbHarness, PctCrumbLinkHarness from @pacit/components/testing read a part by the name below and a state by its attribute — the harness gate holds the names to the package.

Part	Selector	What it is
`list`	`[data-pct-part="list"]`	the ordered list of crumbs
`separator`	`[data-pct-part="separator"]`	the mark between two crumbs

Tokens

Every value the component reads, with the light and the dark default. Override a token at any scope and it cascades like any custom property.

Token	Styles
`--pct-breadcrumb-fg{pct.text}`#0f172a · #ffffff	Text colour of the breadcrumb.
`--pct-breadcrumb-font-size{pct.font.size.sm}`13px	Font size of the breadcrumb.
`--pct-breadcrumb-gap{pct.space.2}`4px	Gap between crumbs.
`--pct-breadcrumb-link-fg{pct.text-muted}`#334155 · #e2e8f0	Text colour of a link.
`--pct-breadcrumb-link-fg-hover{pct.text}`#0f172a · #ffffff	Text colour of a link on hover.
`--pct-breadcrumb-link-font-weight-current{pct.font.weight.medium}`500	Font weight of the link naming the current page.
`--pct-breadcrumb-link-target-min{pct.target.min}`24px	Touch-target floor of a link.
`--pct-breadcrumb-separator-fg{pct.text-muted}`#334155 · #e2e8f0	Text colour of the separator.

Theming

A brand override in a few declarations. Scope it to a theme attribute, a page or one container — the component never notices.

[data-theme='brand'] {
  --pct-breadcrumb-link-fg: #0f766e;
  --pct-breadcrumb-link-fg-hover: #134e4a;
  --pct-breadcrumb-separator-fg: #5eead4;
}

Accessibility

Measured, not assumed

Pattern: Breadcrumb — (0054) a named navigation landmark, a list of links, aria-current="page" on the one you are on. Named in the class JSDoc.

Keyboard

key	effect	test
`Tab` / `Shift+Tab`	moves between the steps	`apps/sandbox-e2e/src/breadcrumb.spec.ts` — "every step is a real tab stop"
`Enter`	follows the link	none — deliberately: the anchor navigates on its own, and testing it tests the browser (`req-api-platform`)

There are no handlers to map: nothing here listens to a key.

Evidence

What the repository holds for this component

Read at build time from the tracked snapshots, not typed here.

92%mutation score23 of 25 mutants killed

6 × 3e2e cases × enginesplus the shared audits: axe, forced colors, preferences, size, hydration

4colour pairs measuredlight and dark, at every token build

2visual baselinesChromium, the sandbox's own pictures

17elements in the preview0 listeners · 1 render to settle · 5730 µs in jsdom, held exactly but for the clock

Known limitations

No collapse for long trails. A trail too long for its line wraps; folding steps into an overflow menu is a composition with pct-menu owned by the consumer, and it returns as its own decision the day a real application shows the need.
No items input. An array of {label, url} would regenerate anchors the router already owns — the markup is the consumer's, which is the component's founding split.
The component cannot verify the trail. A breadcrumb that lies about the hierarchy is the application's sentence; the component checks structure (the dev-mode warnings), never truth.
Bare-text current steps carry no weight. The weight rides on [aria-current], and bare text carries no attribute; it is told apart by colour in the author palette and by not-being-a-link in forced colours — a consumer who wants the weight writes the current step as a link to itself.

pacit

Usage

Every state, running

A long way here

What it reads, and what it writes back

Inputs

Outputs

What it writes on the element

Parts to select, tokens to override

Parts

Tokens

Theming

Measured, not assumed

Keyboard

What is measured, and what is not yet

What the repository holds for this component

Known limitations