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 7 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`items`	`BreadcrumbItem[] \| null`	`null`	Trail supplied by the consumer, replacing the one derived from the router. Left null, the component keeps reading HubBreadcrumbsService.
`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.
`maxItems`	`number \| undefined`	`undefined`	Length above which the trail collapses behind an indicator. Undefined never collapses, however long the trail grows.
`itemsBeforeCollapse`	`number`	`1`	Crumbs kept at the head of a collapsed trail.
`itemsAfterCollapse`	`number`	`1`	Crumbs kept at the tail of a collapsed trail, the current page included.
`collapsedAriaLabel`	`string`	`'Show the hidden breadcrumb items'`	Accessible name of the collapsed indicator, so the one string this component announces can be translated by the host application.

Outputs

React to what breadcrumbs does — 1 events to hook your logic onto.

Name	Type	Description
`collapsedClick`	`void`	Fires when the collapsed indicator is activated. The trail expands on its own; the event is for consumers that want to react as well.

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>`