Breadcrumb
@xui/breadcrumbStands in for crumbs that were dropped from the middle of a trail.
Install
pnpm add @xui/breadcrumb Add the barrel to a standalone component's imports:
import { XuiBreadcrumbImports } from '@xui/breadcrumb';
@Component({
imports: [XuiBreadcrumbImports],
// …
})Examples
Collapsing
<div class="border-border resize-x overflow-auto rounded border p-3" style="width: 30rem">
<xui-breadcrumbs [items]="items" [minVisibleItems]="1" />
</div>Collapse from end
<div class="border-border resize-x overflow-auto rounded border p-3" style="width: 24rem">
<xui-breadcrumbs [items]="items" collapseFrom="end" [minVisibleItems]="1" />
</div>Custom current crumb
Source only — this one needs a component of its own to run, so there is nothing to render here.
<xui-breadcrumbs [items]="items">
<ng-template xuiBreadcrumbsCurrent let-item>
<span class="text-primary-emphasis inline-flex items-center gap-1.5 font-semibold">
<ng-icon xui size="sm" name="matFolderRound" />
{{ item.text }}
</span>
</ng-template>
</xui-breadcrumbs>Composed
<nav xuiBreadcrumb>
<ol xuiBreadcrumbList>
<li xuiBreadcrumbItem>
<!-- The icon is decorative (aria-hidden), so an icon-only link has
to carry the name itself. -->
<a xuiBreadcrumbLink href="#" aria-label="Home"><ng-icon xui size="md" name="matHomeRound" /></a>
</li>
<li xuiBreadcrumbSeparator></li>
<li xuiBreadcrumbItem><xui-breadcrumb-ellipsis /></li>
<li xuiBreadcrumbSeparator></li>
<li xuiBreadcrumbItem>
<a xuiBreadcrumbLink href="#">Components</a>
</li>
<li xuiBreadcrumbSeparator></li>
<li xuiBreadcrumbItem active>
<span xuiBreadcrumbPage>Breadcrumb</span>
</li>
</ol>
</nav>API
Stands in for crumbs that were dropped from the middle of a trail.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''One crumb of the trail: the <li> holding a link (or the current page) and its separator.
Inputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''activebooleanEmphasise this crumb's contents. Appearance only — mark the current page with xuiBreadcrumbPage, which carries the aria-current a screen reader needs.falseA navigable crumb.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''disabledbooleanRenders the crumb as unreachable without dropping it from the trail.falseThe ordered list of crumbs — the layout of the trail.
Inputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''The last crumb — where the user already is.
Inputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''The divider between two crumbs. Defaults to a chevron; project any content to replace it.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''The landmark wrapping a breadcrumb trail: a role="navigation" with an accessible name.
Inputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''ariaLabelstringThe landmark's accessible name. Defaults to breadcrumb; override it when a page has more than one trail, since a screen reader lists landmarks by name.'breadcrumb'Replaces the default rendering of every crumb.
Replaces the default rendering of the current crumb only.
Replaces the ellipsis shown in place of the collapsed crumbs.
A breadcrumb trail built from an array, collapsing to fit its container.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''itemsreadonly T[]The trail, root first. Each entry renders through XuiBreadcrumbData unless a xuiBreadcrumbsItem template overrides it; a wider T is passed through to that template untouched, so extra fields survive the round trip to itemClick.collapseFromXuiOverflowBoundaryWhich end collapses. A trail collapses from the start, keeping where you are.'start'minVisibleItemsnumberNever collapse below this many crumbs, however narrow the container gets.0Outputs
overflowT[]Emits the collapsed crumbs whenever the set changes.itemClickTEmits when a navigable crumb is activated. A crumb with neither href nor link is not.