1

Adaptive ActionsNew

A responsive action toolbar that measures its available inline size with ResizeObserver and smoothly moves overflowed items into an accessible dropdown menu. Priority and pinned flags ensure critical actions always remain visible. Items animate with opacity/transform when crossing the visible↔overflow boundary — no width animation.

Dependencies

motion

Interaction Type

Arrow keys rove focus across visible toolbar items and the overflow trigger (RTL-aware). Home/End jump to the ends. Enter/Space invoke an action or open the overflow menu. Inside the overflow menu, ArrowUp/Down navigates items, Escape returns focus to the trigger. Pinned items never overflow; higher-priority items overflow last. The overflow trigger shows a localized "More actions" label for screen readers.

Props

Options you can pass to customize this component.

Prop
Type
Description
actions*
ActionItem[]

Array of action items. Each has id, label, optional icon, disabled, destructive, priority (higher = overflows last), pinned (never overflows), and onSelect callback.

label
string

aria-label for the toolbar region. Defaults to 'Actions'.

moreLabel
string

Localized label for the overflow trigger button. Defaults to 'More actions'.

renderMoreTrigger
(count: number) => ReactNode

Render a custom overflow trigger. Receives the count of hidden items.

maxVisible
number

Maximum visible items before overflow — independent of inline measurement. Optional.

className
string

Merged onto the root toolbar element via cn().

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/adaptive-actions.json

How to use

import { AdaptiveActions, type ActionItem } from "@/components/ui/adaptive-actions"

const actions: ActionItem[] = [
  { id: "edit", label: "Edit", priority: 3, pinned: true, icon: <EditIcon />, onSelect: () => {} },
  { id: "duplicate", label: "Duplicate", priority: 2, icon: <CopyIcon />, onSelect: () => {} },
  { id: "share", label: "Share", priority: 1, icon: <ShareIcon />, onSelect: () => {} },
  { id: "delete", label: "Delete", destructive: true, icon: <TrashIcon />, onSelect: () => {} },
]

export function Demo() {
  return <AdaptiveActions actions={actions} label="Document actions" moreLabel="More" />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/adaptive-actions.json