createOverflow API

API reference for the createOverflow composable.

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).