インタラクティブなサンプル

一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。

基本のパンくず

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

コード

動的なパンくず

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.

コード

カスタムテンプレート

The hubBreadcrumbItem directive allows custom rendering of each element.

コード

パンくずのアイコン

コード

RTL レイアウト

コード

省略とツールチップ

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

コード

長いパンくずの折りたたみ

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.

ルーター外のリンク先

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.

キーボードフォーカスリング

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

シグナルとしてのパンくず

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.