交互式示例

探索实时示例，了解该库在常见 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.