API reference
Breadcrumb combines minimal headless directives and a wrapper component that adds collapse, separator, and current-item resolution.
Wrapper APIs
| Element | Input | Type | Description |
|---|---|---|---|
<tng-breadcrumb> | ariaLabel | string | null | Accessible label for the breadcrumb navigation landmark. |
<tng-breadcrumb> | separator | string | Separator symbol rendered between visible breadcrumb items. |
<tng-breadcrumb> | maxItems, itemsBeforeCollapse, itemsAfterCollapse | number | null | Collapse controls for long breadcrumb paths. |
<tng-breadcrumb-item> | href, routerLink | string | string[] | null | Link target; item becomes text-only when both are absent. |
<tng-breadcrumb-item> | current, currentAsLink, disabled | boolean | Current-page semantics, optional current-link, and disabled behavior. |
Primitive directives
| Directive | Purpose | State hooks |
|---|---|---|
tngBreadcrumb | Root navigation landmark slot. | data-slot="breadcrumb" |
tngBreadcrumbList | Ordered list slot for breadcrumb items. | data-slot="breadcrumb-list" |
tngBreadcrumbItem, tngBreadcrumbLink | Item and link slots for owner-controlled rendering. | data-slot="breadcrumb-item|breadcrumb-link" |
tngBreadcrumbSeparator | Decorative separator slot rendered with aria-hidden. | data-slot="breadcrumb-separator" |
Data attributes from wrapper items
data-current="true"on resolved current item.data-disabled="true"on disabled items.data-collapsed="true"on ellipsis collapse marker item.data-focused="true"anddata-focus-visible="true"during keyboard focus.