Liquid Radial Menu
A floating action button with organic liquid-gooey surface tension that splits into satellite action droplets with spring physics, rotation trigger morph, and anticipation momentum.
Dependencies
Interaction Types
Click plus button to trigger liquid division
Organic gooey bridge with viscous surface tension
Closing anticipation dip with momentum settle
How to use
import { LiquidMenu } from "@/components/liquid-menu";
export default function Demo() {
return (
<LiquidMenu
size="md"
items={[
{ label: "New File", icon: <FileIcon />, onClick: () => console.log("New file") },
{ label: "Upload Image", icon: <ImageIcon />, onClick: () => console.log("Upload") },
{ label: "New Folder", icon: <FolderIcon />, onClick: () => console.log("Folder") },
]}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | LiquidMenuItem[] | DEFAULT_SATELLITES | Array of satellite action buttons with label, icon, and onClick |
| size | "sm" | "md" | "lg" | "md" | Scale configuration of button, stage, and icons |
| spread | number | 1 | Radial fan spread distance multiplier |
| defaultOpen | boolean | false | Initial open state (uncontrolled) |
| open | boolean | — | Controlled open state |
| onOpenChange | (open: boolean) => void | — | Called when the menu opens or closes |
| disabled | boolean | false | Disables the trigger |