createOverflow API

Computes how many items fit in a container based on available width, for responsive truncation in pagination, breadcrumbs, and similar UIs.

Explore these related pages for additional context and usage patterns.

Page	Category
createOverflow	Semantic
Overflow	Semantic
Breadcrumbs	Semantic
Pagination	Semantic
createVirtual	Data

Functions

createOverflow

(options?: OverflowOptions) => E

Creates a new overflow context for computing how many items fit in a container.

createOverflowContext

(_options?: OverflowContextOptions) => ContextTrinity<E>

Creates an overflow context with dependency injection support.

useOverflow

(namespace?: string) => E

Returns the current overflow context from dependency injection.

Options

container

MaybeRefOrGetter<Element | null | undefined>

Container element to track. Can be a ref, getter, or MaybeRefOrGetter. When provided, useOverflow tracks this element's width automatically. Accepts null for compatibility with Vue's useTemplateRef.

gap

MaybeRefOrGetter<number> | undefined

Gap between items in pixels

reserved

MaybeRefOrGetter<number> | undefined

Reserved space in pixels (for nav buttons, ellipsis, etc)

itemWidth

MaybeRefOrGetter<number> | undefined

Uniform item width in pixels. When provided, enables uniform mode where capacity is calculated as available space / itemWidth. Use this for same-width items like pagination buttons.

reverse

MaybeRefOrGetter<boolean> | undefined

Calculate capacity from end instead of start. Useful for breadcrumbs where trailing items take priority. Only affects variable mode (uniform mode capacity is direction-independent).

Properties

container

ShallowRef<Element | null | undefined>

Container element ref

width

Readonly<ShallowRef<number>>

Current container width

capacity

ComputedRef<number>

How many items fit in available space

total

ComputedRef<number>

Total width of all measured items

isOverflowing

Readonly<Ref<boolean, boolean>>

Whether items overflow the container

Methods

measure

(index: number, el: Element | undefined) => void

Register an item's element for width measurement. Required for every child in both modes — variable mode reads the measured widths for capacity; uniform mode reads only the entry count for isOverflowing. Pass undefined to unregister.

reset

() => void

Clear all measurements