Overflow
Headless responsive truncation primitive. Children render until the container runs out of width, then overflowing items are hidden and an indicator surfaces the hidden count.
Usage
Overflow is built on the createOverflow composable. Wrap any horizontal list of items with Overflow.Root, register each item via Overflow.Item, and add an Overflow.Indicator to render the +N more affordance when truncation kicks in.
<script setup lang="ts">
import { Overflow } from '@vuetify/v0'
const tags = ['Vue', 'React', 'Svelte', 'Solid', 'Qwik']
</script>
<template>
<Overflow.Root class="flex gap-2 overflow-hidden">
<Overflow.Item v-for="tag in tags" :key="tag" :value="tag">
{{ tag }}
</Overflow.Item>
<Overflow.Indicator v-slot="{ count }">
+{{ count }} more
</Overflow.Indicator>
</Overflow.Root>
</template>Anatomy
<script setup lang="ts">
import { Overflow } from '@vuetify/v0'
</script>
<template>
<Overflow.Root>
<Overflow.Item />
<Overflow.Indicator />
</Overflow.Root>
</template>Examples
Recipes
Disable truncation conditionally
<template>
<Overflow.Root :disabled="showAll">
<Overflow.Item v-for="t in tags" :key="t" :value="t">
{{ t }}
</Overflow.Item>
</Overflow.Root>
<button @click="showAll = !showAll">
{{ showAll ? 'Collapse' : 'Show all' }}
</button>
</template>Pin specific items so they always render
<template>
<Overflow.Root>
<Overflow.Item v-for="item in items" :key="item.id" :disabled="item.pinned">
{{ item.label }}
</Overflow.Item>
</Overflow.Root>
</template>A disabled Item is exempt from capacity math and always renders.
Accessibility
| Concern | Mechanism |
|---|---|
| Hidden items announced to AT | Items receive aria-hidden="true" when off-capacity |
| Indicator announcements | aria-live="polite" on the indicator’s element |
| Container semantics | Overflow.Root defaults to <div>; pass as="ul" and as="li" on Items for list semantics |
FAQ
The indicator’s reserved width isn’t known until the indicator has rendered at least once. On the first overflow event, capacity is computed without the reservation, the indicator renders, its width is measured, and capacity recomputes one tick later. The indicator measures itself with a ResizeObserver so changes to its content (e.g., +1 → +99) keep the reservation accurate without manual intervention. This is the same two-tick settle that Breadcrumbs already accepts.
No — Overflow is one-sided by design. Bisect logic lives in the specialized Breadcrumbs component.
Reading getComputedStyle().gap adds a layout pass on every measurement. The component takes the value as a number to keep capacity computation cheap. Mirror it in your CSS or utility class.