Overflow list

Keeps priority actions visible and moves excess actions into a menu.

Preview

In action

Choose an action

When to use

Use it for

Responsive action rows where order also establishes priority.

Not for

Hiding critical navigation or a form's only submit action.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { OverflowList } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/overflow-list.

2. Vendor the source

npx @noorddev/vlak-cli add overflow-list

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/overflow-list.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { OverflowList } from "@noorddev/vlak-react";

<OverflowList maxVisible={2} items={[{ id: "copy", label: "Copy", onAction: () => {} }, { id: "duplicate", label: "Duplicate", onAction: () => {} }, { id: "archive", label: "Archive", onAction: () => {} }]} />

Props

OverflowList

Keeps priority actions in order and moves the remainder into a keyboard menu.

Prop	Type	Default	Description
`items`required	`OverflowAction[]`
`label`	`string`	`"Actions"`
`maxVisible`	`number`	`items.length`	Upper bound on visible priority actions, available width may show fewer.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab, Enter, Space, arrows, Escape`	Native visible buttons activate normally. The overflow uses DropdownMenu keyboard navigation and Escape.

Accessibility

Overflow actions remain in a named menu. Hidden measurement text is excluded from accessibility.

Markup

<div class="rs-overflow-list" role="group" aria-label="Actions"><button class="rs-btn-ghost">Copy</button><div class="rs-overflow-list-more"><button class="rs-btn-ghost" aria-haspopup="menu">More actions</button></div></div>

Classes

.rs-overflow-list.rs-overflow-list-measure.rs-overflow-list-sample.rs-overflow-list-more

Depends on

/button /dropdown-menu