API リファレンス

breadcrumbs の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

7 個のインプットで breadcrumbs を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`items`	`BreadcrumbItem[] \| null`	`null`	利用側が渡すパンくず。ルーターから導出されたものを置き換えます。null のままなら、コンポーネントは HubBreadcrumbsService を読み続けます。
`variant`	`string`	—	パンくずリンクのセマンティックアクセント（primary、success など）または任意のカスタムトークン名。
`truncateItems`	`boolean`	`false`	true のとき、各ラベルを --hub-breadcrumb-max-item-width で省略記号付きに切り詰め、あふれた場合はツールチップを表示します。hubBreadcrumbItem テンプレートも対象です。コンポーネントが投影された内容を自前の span.hub-breadcrumb__custom で包み、その箱を切り詰めます。カプセル化されたスタイルは、利用側コンポーネントが所有する要素には届かないからです。
`maxItems`	`number \| undefined`	`undefined`	この長さを超えるとパンくずがインジケーターの背後に折りたたまれます。undefined の場合、どれだけ長くなっても折りたたみません。
`itemsBeforeCollapse`	`number`	`1`	折りたたまれたパンくずの先頭に残す項目数。
`itemsAfterCollapse`	`number`	`1`	折りたたまれたパンくずの末尾に残す項目数（現在のページを含む）。
`collapsedAriaLabel`	`string`	`'Show the hidden breadcrumb items'`	折りたたみインジケーターのアクセシブルネーム。このコンポーネントが読み上げる唯一の文字列を、ホストアプリケーション側で翻訳できます。

アウトプット

breadcrumbs の動作に反応 — ロジックを接続できる 1 個のイベント。

名前	型	説明
`collapsedClick`	`void`	折りたたみインジケーターが操作されたときに発火します。パンくず自体は自動的に展開されるため、このイベントは追加の処理を行う利用側のためのものです。

メソッド

breadcrumbs をコードから操作 — プログラム操作のための 3 個のメソッドを備えています。

名前	シグネチャ	戻り値	説明
`HubBreadcrumbsService.breadcrumbs`	`breadcrumbs: Signal<BreadcrumbItem[]>`	`Signal<BreadcrumbItem[]>`	シグナルとしてのパンくず。コンポーネント自身が読むのもこの面です。サービスの内側で一度だけラップされ、アプリケーション全体で一度だけ購読されるので、ページヘッダーでもドキュメントタイトルでも、async パイプなしで派生できます。
`HubBreadcrumbsService.breadcrumbs$`	`breadcrumbs$: Observable<BreadcrumbItem[]>`	`Observable<BreadcrumbItem[]>`	同じパンくずを Observable として。すでに rxjs で組み立てているコードのために残されています。どちらも同じナビゲーションを報告するので、呼び出し側がすでに話しているほうを取ってください。
`provideHubBreadcrumbTooltip`	`provideHubBreadcrumbTooltip(adapter: HubBreadcrumbTooltipAdapter): EnvironmentProviders`	`EnvironmentProviders`	ツールチップアダプターをアプリ全体に一度だけ登録し、切り詰められたラベルがネイティブの title 属性ではなく hub-ui のツールチップを表示するようにします。プロバイダーを外すと title に戻ります。

テンプレート

自分好みに — 2 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`hubBreadcrumbItem`	個々のパンくず項目をレンダリングするためのカスタムテンプレート	`<ng-template hubBreadcrumbItem let-item let-isLast="isLast"> @if (!isLast) { <a [routerLink]="item.url" class="breadcrumb-link">{{ item.label }}</a> } @else { <span class="breadcrumb-current">{{ item.label }}</span> } </ng-template>`
`hubBreadcrumbLabel`	切り詰められたラベルの全文をツールチップとして見せるディレクティブ。コンポーネントは自身が描画するラベルと、hubBreadcrumbItem テンプレートを包む箱にこれを適用します。手で付けるのは、ツールチップの文言を差し替えたいときだけです。	`<a class="my-crumb" hubBreadcrumbLabel [routerLink]="item.url">{{ item.label }}</a>`