Docs·Expanding Menu

Expanding Menu

A compact action button that springs into a responsive grid of customizable menu items.

Installation

$pnpm dlx shadcn@latest add @spiderui/expanding-menu

Usage

API Reference

PropTypeDefault
itemsIcons, labels, and optional values shown in the grid.
ExpandingMenuItem[]Six default actions
labelShared label for the collapsed button and expanded menu.
stringAdd item
defaultOpenSets the initial disclosure state.
booleanfalse
onItemSelectCalled when a menu item is selected.
(item) => void—
classNameAdditional classes for the root wrapper.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Choose an item to add

import { ExpandingMenu } from "@/components/ui/expanding-menu"
export default function Page() {
  return <ExpandingMenu onItemSelect={(item) => console.log(item.label)} />
}