Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Einfache Breadcrumbs

Items are generated from the data.breadcrumb configuration of active routes.

Code

Dynamische Breadcrumbs

The last crumb comes from a route declaring breadcrumb: "Dynamic: {name}", resolved with that route's data. This page has no router tree, so the demo is handed the resulting trail — the route configuration is in the TS tab.

Code

Benutzerdefinierte Vorlagen

The hubBreadcrumbItem directive allows custom rendering of each element.

Code

Symbole im Pfad

Code

RTL-Layout

Code

Kürzung & Tooltip

Each label is capped at --hub-breadcrumb-max-item-width (12rem). Only the items that overflow get a tooltip.

Code

Lange Pfade einklappen

Six crumbs, no collapsing — the default

maxItems = 4 — one crumb each side of the indicator

maxItems = 4 with two crumbs kept on each side

Indicator opened 0 time(s) — that is the collapsedClick output. The trail expands on its own and collapses again on the next navigation.

Ziele außerhalb des Routers

Example.com leaves the app in a new tab, llms.txt downloads a file, and Design system is an ordinary in-app crumb routed through routerLink. The last crumb is never a link, whatever it declares.

Tastatur-Fokusring

Default ring — press Tab to walk the trail

Re-tinted ring on the same markup

The ring reaches the collapsed indicator too, which is a button and therefore part of the tab order. Note where the overrides live: the focus tokens are declared on :host, so a value set on an ancestor never reaches them — put it on the <hub-breadcrumb> element or inside it. (The accent slot is the one exception, left undeclared on purpose so it does inherit.)

Der Pfad als Signal

INV-2026-0184

in Invoices · 5 levels deep

The heading and the crumbs are two readings of the same signal. Only the trail changes when you move; neither the header nor the component is told anything.