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
Loading preview…
<div class="border-border resize-x overflow-auto rounded border p-3" style="width: 30rem"> <xui-breadcrumbs [items]="items" [minVisibleItems]="1" /></div>Collapse the middle
Loading preview…
<div class="w-72"> <xui-breadcrumbs [items]="items" [maxItems]="3" [itemsBeforeCollapse]="1" [itemsAfterCollapse]="1" /></div>Collapse the middle keeping two ends
Loading preview…
<xui-breadcrumbs [items]="items" [maxItems]="4" [itemsBeforeCollapse]="2" [itemsAfterCollapse]="2" />Collapse from end
Loading preview…
<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
Loading preview…
<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.''aria-labelstringThe 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.
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 when the trail is measured. A trail collapses from the start, keeping where you are.'start'minVisibleItemsnumberNever collapse below this many crumbs, however narrow the container gets. Measured collapse only.0maxItemsnumberCollapse the middle once the trail is longer than this many crumbs. 0 — the default — leaves collapsing to the measurement, which is the right behaviour when the trail's width is the only thing at stake. A number takes over completely: the trail no longer measures, so it renders the same on every screen, which is what makes it worth setting.0itemsBeforeCollapsenumberHow many crumbs stay at the root end when the middle collapses.1itemsAfterCollapsenumberHow many crumbs stay at the current end when the middle collapses.1overflowLabelstringAccessible name of the button that opens the collapsed crumbs.'Show the crumbs in between'Outputs
overflowT[]Emits the collapsed crumbs whenever the set changes.itemClickTEmits when a navigable crumb is activated, from the trail or from the overflow menu.