YuuvisBreadcrumbComponent

component

A generic, accessible breadcrumb navigation component.

Renders a flat list of navigation items where the last item always represents the current location (non-clickable) and all preceding items are interactive links. Each link is individually focusable via standard Tab navigation.

Key behaviors

• Items are rendered left-to-right, separated by a / divider

• The last item is always the current page — displayed as plain text (no link, no click handler)

• All preceding items are rendered as <a> links that emit the navigate output on click or Enter

• The component performs no routing — the parent handles all navigation logic via the emitted BreadcrumbItem

• Empty items array renders nothing (the host element stays in the DOM but is visually empty)

Usage

The parent builds the BreadcrumbItem[] and passes it as input. Typically this array mirrors the object hierarchy the user navigated through (e.g. Case → Phase → Document).

Example :

// Parent component

breadcrumbItems: BreadcrumbItem[] = [

{ id: 'case-42',  name: 'Case #42' },      // ← clickable link

{ id: 'phase-3',  name: 'Review' },          // ← clickable link

{ id: 'doc-7',    name: 'Contract.pdf' }     // ← current location (non-clickable)

];

onBreadcrumbNavigate(item: BreadcrumbItem): void {

// item.id is the domain-specific key — use it to navigate

this.router.navigate(['/objects', item.id]);

}

Example :

<yuv-breadcrumb

[items]="breadcrumbItems"

(navigate)="onBreadcrumbNavigate($event)" />

Renders visually as:

Example :

Case #42  /  Review  /  Contract.pdf

[link]       [link]      [current]

Component Metadata

Selector: yuv-breadcrumb

Standalone: No

Inputs

items

Type: BreadcrumbItem[]

Default Value: []

Ordered list of breadcrumb items to display.Each BreadcrumbItem has { id: string; name: string } — where id is a unique key (typically an object/route ID) and name is the display label rendered in the trail.Position determines rendering behavior:* All items except the last → clickable <a> links* Last item → non-clickable text (current location)Defaults to an empty array, which renders nothing.Example :

// Case → Document trail[items]="[  { id: 'case-42', name: 'Case #42' },  { id: 'doc-7',   name: 'Invoice.pdf' }]"

Outputs

navigate

Type: BreadcrumbItem

Emitted when the user activates a clickable breadcrumb item (click or Enter key).The emitted value is the full BreadcrumbItem object ({ id, name }) that was activated. Never emitted for the last item since it is non-clickable. The parent is responsible for performing the actual navigation using item.id.Example :

onBreadcrumbNavigate(item: BreadcrumbItem): void {  // item = { id: 'case-42', name: 'Case #42' }  this.router.navigate(['/objects', item.id]);}