Overflow List
@astryxdesign/core v0.7.1 · OverflowList
Usage
OverflowList decides how many items fit in the container and moves the rest into a More menu. It collapses from the end by default. collapseFrom="start" collapses from the start. visibleCount skips measurement and is what tests use.
Each item is { label, href?, iconClass? }. Customize a row with the item slot and the overflow menu with the overflow slot.
<script setup lang="ts">
import { OverflowList } from '@astryx-vue/core/OverflowList'
const items = [
{ href: '/home', label: 'Home' },
{ href: '/files', label: 'Files' },
{ href: '/settings', label: 'Settings' },
]
</script>
<template>
<OverflowList :items="items" />
</template>Anatomy
| Element | Description |
|---|---|
| List | Visible horizontal list container for the currently shown content. |
| Items | Caller-supplied items selected for visible display by the current width and count limits. |
| Overflow indicator | Optional caller-rendered indicator for items collapsed by width or count limits. |
Best practices
| Guidance | Practice |
|---|---|
| Do | Let the list take its width from the parent. Extra items move into the menu on their own. |
| Do | Set minVisibleItems when a few items must stay visible. |
| Avoid | Do not render the same item again outside the menu. Visible items and overflow items are two slices. |
Examples
Capped toolbar
maxVisibleItems caps the row at three actions even when more would fit; the rest move to a dropdown.
Collapse from start
Overflow list that hides items from the start, keeping the latest visible.
Multi-row tags
Tags wrap onto up to two rows with maxRows, then collapse the rest into a count badge.
Badge tags
Resizable row of badges that collapses into a count badge on overflow.
Dropdown actions
Action toolbar that collapses overflow buttons into a dropdown menu.
Table filter
Filter bar above a table: a search box leads the row, each field beside it is a closed trigger that doubles as its own filter chip, and the clauses fold from the end into a count as the row narrows.