API reference

Here's the full contract for breadcrumbs: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial breadcrumbs in with 3 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`breadcrumbs$`	`Observable<BreadcrumbItem[]>`	—	Observable stream of breadcrumb items automatically generated from route data.
`variant`	`string`	—	Semantic accent for the breadcrumb links (e.g. primary, success) or any custom token name.
`truncateItems`	`boolean`	`false`	When true, clips each label to --hub-breadcrumb-max-item-width with an ellipsis and shows a tooltip on overflow.

Outputs

No outputs documented yet.

Templates

Make it yours — 1 template slots let you project custom markup.

Name	Description	Example
`hubBreadcrumbItem`	Custom template for rendering individual breadcrumb items	`<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>`