Overflow list
@xui/overflow-listMarks the template used to render each visible item.
Install
pnpm add @xui/overflow-list Add the barrel to a standalone component's imports:
import { XuiOverflowListImports } from '@xui/overflow-list';
@Component({
imports: [XuiOverflowListImports],
// …
})Examples
Default
Source only — this one needs a component of its own to run, so there is nothing to render here.
<div class="border-border resize-x overflow-auto rounded border p-3" style="width: 32rem">
<xui-overflow-list [items]="items()">
<ng-template xuiOverflowListItem let-item>
<a xuiLink color="inherit" underline="hover" href="#" class="whitespace-nowrap">{{ item }}</a>
</ng-template>
<ng-template xuiOverflowListOverflow let-count="count">
<xui-tag minimal>+{{ count }}</xui-tag>
</ng-template>
</xui-overflow-list>
</div>Collapse from end
Source only — this one needs a component of its own to run, so there is nothing to render here.
<div class="border-border resize-x overflow-auto rounded border p-3" style="width: 24rem">
<xui-overflow-list [items]="items()" collapseFrom="end">
<ng-template xuiOverflowListItem let-item>
<a xuiLink color="inherit" underline="hover" href="#" class="whitespace-nowrap">{{ item }}</a>
</ng-template>
<ng-template xuiOverflowListOverflow let-count="count">
<xui-tag minimal>+{{ count }}</xui-tag>
</ng-template>
</xui-overflow-list>
</div>Collapsing breadcrumbs
Source only — this one needs a component of its own to run, so there is nothing to render here.
<nav xuiBreadcrumb class="border-border resize-x overflow-auto rounded border p-3" style="width: 28rem">
<xui-overflow-list [items]="items()" [minVisibleItems]="1">
<ng-template xuiOverflowListItem let-item let-index="index">
<span xuiBreadcrumbItem class="whitespace-nowrap">
@if (index > 0) {
<span xuiBreadcrumbSeparator class="mr-1.5"></span>
}
@if (index === items().length - 1) {
<span xuiBreadcrumbPage>{{ item }}</span>
} @else {
<a xuiBreadcrumbLink href="#">{{ item }}</a>
}
</span>
</ng-template>
<ng-template xuiOverflowListOverflow>
<xui-breadcrumb-ellipsis />
</ng-template>
</xui-overflow-list>
</nav>API
Marks the template used to render each visible item.
Marks the template used to render the collapsed items.
Renders as many items as fit on one line and hands the rest to an overflow template.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''itemsreadonly T[]The items to lay out. Those that do not fit are handed to the overflow template instead.collapseFromXuiOverflowBoundaryWhich end collapses. Breadcrumbs collapse from the start, tab bars from the end.'start'minVisibleItemsnumberNever collapse below this many items, however narrow the container gets.0alwaysRenderOverflowbooleanRender the overflow template even when nothing is hidden.falseitemRolestring | nullRole for the wrapper around each item, including the overflow one. The wrappers exist to hold the layout, so by default they are plain elements. A list needs them announced: set role="list" on the host and itemRole="listitem" here, and the wrappers stop breaking the chain between the two.nullOutputs
overflowChangeT[]Emits the hidden items whenever the overflow set changes.