Overflow List · astryx-svelte

Usage

A horizontal list that automatically hides items when they exceed the available width. Use OverflowList for breadcrumbs, toolbars, tag lists, or any row that needs to collapse gracefully at smaller sizes.

ts
 
import { OverflowList } from '@astryx-svelte/core';

Best practices

Guidance	Practices
Do	Provide a meaningful overflowRenderer: a "+N more" badge, a dropdown, or a count indicator.
Do	Set minVisibleItems to keep key items visible, and maxVisibleItems to cap the row at a fixed count regardless of available width.
Do	Use maxRows to let items wrap onto a bounded number of rows (e.g. a two-row tag cloud) before collapsing the rest into the indicator.
Don't	Use OverflowList for a vertical stack; horizontal multi-row wrap is supported via maxRows, but items still flow left-to-right, not top-to-bottom.

Examples

Common configurations, variations, and states.

OverflowList — Capped Toolbar

maxVisibleItems caps the row at three actions even when more would fit; the rest move to a dropdown

OverflowList — Collapse From Start

Overflow list that hides items from the start, keeping the latest visible

OverflowList — Multi-row Tags

Tags wrap onto up to two rows with maxRows, then collapse the rest into a count badge

OverflowList — Badge Tags

Resizable row of badges that collapses into a count badge on overflow

OverflowList — Dropdown Actions

Action toolbar that collapses overflow buttons into a dropdown menu