Component

Breadcrumb

A trail of links showing where a page sits in the hierarchy. Items link, route, or emit a click; the trail can collapse long paths and use any separator.

Basic

At: Black Forest

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import { HbBreadcrumbImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-breadcrumb-basic',
  imports: [HbBreadcrumbImports],
  template: `
    <div class="flex flex-col gap-2">
      <hb-breadcrumb>
        <hb-breadcrumb-item (hbClick)="go('Herbst')">Herbst</hb-breadcrumb-item>
        <hb-breadcrumb-item (hbClick)="go('Autumn')">Autumn</hb-breadcrumb-item>
        <hb-breadcrumb-item hbCurrent>Black Forest</hb-breadcrumb-item>
      </hb-breadcrumb>

      <p class="font-mono text-[12px] text-muted-foreground">At: {{ at() }}</p>
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoBreadcrumbBasicComponent {
  protected readonly at = signal('Black Forest');

  protected go(label: string): void {
    this.at.set(label);
  }
}

Separators

Collapsed (max items)

Size & alignment

API reference

hb-breadcrumb

Property	Description	Type	Default
[hbSize]	Text scale of the whole trail.	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'
[hbAlign]	Horizontal alignment of the trail.	'start' \| 'center' \| 'end'	'start'
[hbWrap]	Allow the trail to wrap onto multiple lines.	'wrap' \| 'nowrap'	'wrap'
[hbSeparator]	Separator string between items (e.g. "/"). Overridden by a template separator.	string	''
[hbMaxItems]	Collapse the middle items into an ellipsis when the count exceeds this.	number \| null	null
[hbBreadcrumbSeparator]	Template directive for a custom separator (e.g. an icon).	template	—

hb-breadcrumb-item

Property	Description	Type	Default
[hbLink]	Router link path for internal navigation.	string \| string[] \| null	null
[hbHref]	Plain href for an external link.	string	''
[hbQueryParams]	Query params passed with hbLink.	Params \| null \| undefined	undefined
[hbFragment]	URL fragment passed with hbLink.	string \| undefined	undefined
[hbCurrent]	Mark the item as the current page (not a link).	boolean	false
[hbLabel]	Label text, as an alternative to projected content.	string	''
(hbClick)	Emitted when the item is activated.	void	—