Components / Overflow List
Overflow List
Lays out slotted items in a single row and collapses those that don't fit into a trailing "more" menu. Responsive, ResizeObserver-driven.
layoutv0.8.0
Playground
Examples
Action row
<cg-overflow-list more-label="More actions" style="max-width:280px;"><cg-button variant="secondary" size="sm">Cut</cg-button><cg-button variant="secondary" size="sm">Copy</cg-button><cg-button variant="secondary" size="sm">Paste</cg-button><cg-button variant="secondary" size="sm">Delete</cg-button><cg-button variant="secondary" size="sm">Duplicate</cg-button></cg-overflow-list>Keep 2 visible
<cg-overflow-list min-visible="2" style="max-width:200px;"><cg-chip>All</cg-chip><cg-chip>Open</cg-chip><cg-chip>Closed</cg-chip><cg-chip>Archived</cg-chip></cg-overflow-list>Wide (no overflow)
<cg-overflow-list style="max-width:600px;"><cg-button size="sm">One</cg-button><cg-button size="sm">Two</cg-button><cg-button size="sm">Three</cg-button></cg-overflow-list>Import
import { CgOverflowList } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-overflow-list';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
gap | "none" | "xs" | "sm" | "md" | "lg" | "sm" | Gap between items |
more-label | string | "More" | Accessible label for the overflow trigger |
min-visible | number | 0 | Always keep at least N items visible |
Events
| Event | Detail | Description |
|---|---|---|
cg-overflow-change | {hiddenCount: number, hiddenIndices: number[]} | Collapsed set changed |
cg-overflow-select | {index: number} | A hidden item was chosen from the menu |