Components
Gooey menu
A floating action button that splits into drops of liquid: each action buds off the trigger, the necks between them stretch and snap, and they flow back in when it closes.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { GooeyMenu } from '@vizzele/react';
<GooeyMenu
label="Create"
direction="up"
items={[
{ label: 'New note', icon: <NoteIcon />, onSelect: newNote },
{ label: 'Upload', icon: <UploadIcon />, onSelect: upload },
{ label: 'Share', icon: <ShareIcon />, onSelect: share },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label, icon, onSelect }[] | — | The actions. |
direction | 'up' | 'down' | 'left' | 'right' | 'arc' | 'up' | Where the drops travel. |
gap | number | 64 | Distance between drops (px). |
label | string | 'Actions' | Name of the trigger and the menu. |
open / defaultOpen / onOpenChange | … | — | Controlled or not. |
Accessibility
- A real menu button: aria-expanded, aria-haspopup and a role="menu" of menuitems.
- Opening focuses the first action; arrows, Home and End move; Escape closes and returns focus to the trigger.
- Each icon-only action is named by its label, which also shows as a tooltip on hover and focus.
- With reduced motion the drops appear in place — no flow.