Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Basic Breadcrumbs

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

Code

Dynamic 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

Custom Templates

The hubBreadcrumbItem directive allows custom rendering of each element.

Code

Icons on the Trail

Code

RTL Layout

Code

Truncation & Tooltip

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

Code

Collapsing Long Trails

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.

Destinations Beyond the Router

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

Keyboard Focus Ring

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.)

The Trail as a 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.