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. It dresses the markup the component renders itself: a hubBreadcrumbItem template supplies its own elements, which get neither the ellipsis nor the tooltip unless you clip them and add hubBreadcrumbLabel yourself.
`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.

Methods

Drive breadcrumbs from code — 3 methods on its programmatic surface.

Name	Signature	Returns	Description
`HubBreadcrumbsService.breadcrumbs`	`breadcrumbs: Signal<BreadcrumbItem[]>`	`Signal<BreadcrumbItem[]>`	The trail as a signal, and the surface the component itself reads. It is wrapped once inside the service and subscribed once for the whole application, so a page header, a document title or any other reader derives from it without an async pipe.
`HubBreadcrumbsService.breadcrumbs$`	`breadcrumbs$: Observable<BreadcrumbItem[]>`	`Observable<BreadcrumbItem[]>`	The same trail as an Observable, kept for code already composing with rxjs. Both members report the same navigation; take whichever the calling code already speaks.
`provideHubBreadcrumbTooltip`	`provideHubBreadcrumbTooltip(adapter: HubBreadcrumbTooltipAdapter): EnvironmentProviders`	`EnvironmentProviders`	Registers a tooltip adapter once for the whole application, so a truncated label shows the richer hub-ui tooltip instead of the native title attribute. Remove the provider and labels fall back to title.

Templates

Make it yours — 2 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>`
`hubBreadcrumbLabel`	Directive that exposes a clipped label’s full text as a tooltip. The component applies it to the labels it renders itself; apply it inside a hubBreadcrumbItem template to opt a custom crumb back in.	`<a class="my-crumb" hubBreadcrumbLabel [routerLink]="item.url">{{ item.label }}</a>`