A round plus button that unfolds into a stack of labelled actions: the plus turns into a cross and each action springs out in turn.
Open the menu
Customize
Usage
import { FilePlus, Folder, UserPlus } from "lucide-react";
import { ActionMenuButton } from "@/components/motionkit/action-menu-button";
<ActionMenuButton
label="Create"
actions={[
{ label: "New file", icon: <FilePlus />, onSelect: () => createFile() },
{ label: "New folder", icon: <Folder />, onSelect: () => createFolder() },
{ label: "Invite someone", icon: <UserPlus />, onSelect: () => openInvite() },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Actions spring out
Opened
Plus to cross
Opened or closed
Mobile apps, dashboards and editors: a floating create button that offers a few related actions without a full toolbar.
It follows the WAI-ARIA menu button pattern. Opening the menu rotates the plus 135 degrees into a cross on a spring, and each action springs out with a short stagger. Focus moves to the first action, the arrow keys move between them, Escape closes the menu and returns focus to the button, and a click anywhere else closes it too.
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | MenuAction[] | — | Each action's label, icon and onSelect. |
| label | string | "Create" | Accessible name of the button and menu. |
| direction | "up" | "down" | "up" | Which way the actions unfold. |
| accent | string | "#0E7C86" | Colour of the main button. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/action-menu-button. It saves the file to components/motionkit and installs its dependencies.
Action Menu Button is part of MotionKit Plus (£12 / $15 / €14 a month or £96 / $120 / €112 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, actions fade in without springing and the plus turns instantly.
Open the menu
Customize
Usage
import { FilePlus, Folder, UserPlus } from "lucide-react";
import { ActionMenuButton } from "@/components/motionkit/action-menu-button";
<ActionMenuButton
label="Create"
actions={[
{ label: "New file", icon: <FilePlus />, onSelect: () => createFile() },
{ label: "New folder", icon: <Folder />, onSelect: () => createFolder() },
{ label: "Invite someone", icon: <UserPlus />, onSelect: () => openInvite() },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Actions spring out
Opened
Plus to cross
Opened or closed
The live preview is free to explore. Plus unlocks the source for Action Menu Button and every other premium component.