Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
Overflow items

Component for automatically hiding elements with dynamic adaptation to the container width.

Supports two modes of operation:

  • Hiding from the end (default).
  • Hiding from the start.

Configurable via the reverseOverflowOrder attribute.

Order of hiding

The order in which elements are hidden is determined using the order attribute for the KbqOverflowItem directive.

Always visible elements

If you need some elements to always remain visible, you can use the alwaysVisible attribute for the KbqOverflowItem directive.

Element alignment

Element alignment within the container is set using the CSS property justify-content.

Orientation

By default, elements are hidden horizontally. If you need to hide elements vertically, you can use the orientation="vertical" attribute.

Delay when hiding/showing

The delay for hiding/showing elements is set using the debounceTime attribute. Enabling this option positively affects performance when there are many elements or when the container size changes frequently.

<div kbqOverflowItems [debounceTime]="300">...</div>
Additional target for ResizeObserver

Sometimes the container size can change not only when the browser window is resized, but also when other elements on the page change size (for example: Sidebar). To track such changes, you can use the additionalResizeObserverTargets attribute. The attribute accepts either a single element or an array of elements whose size changes will trigger recalculation of hidden elements. By default, document.body is tracked.

<div kbqOverflowItems [additionalResizeObserverTargets]="sidebarContainerElement">...</div>
Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.