A delightfully elastic, blobby menu animation with springy physics and gooey SVG wizardry. Toggle yon button, summon thine icons, and behold them glide left, right, top, or bottom—’tis pure dev alchemy!
Each menu item slides outward from the center along a chosen axis when the menu opens.
The open/close icon smoothly blurs in and out to mask the swap between hamburger and close icons.
Applies a “gooey” merging effect to overlapping items via an SVG filter.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | MenuItem[] | none | Array of menu items with icon, name, and optional data. |
| className | string | "none" | Additional CSS classes for the main toggle button. |
| filterId | string | "gooey-menu-filter" | ID used for the SVG filter to avoid collisions. |
| transition | Transition | { type: "spring", duration: 0.5, bounce: 0.3 } | Motion transition settings for item animations. |
| onChange | (item: MenuItem) => void | none | Callback invoked when a menu item is clicked. |
| direction | "left" | "right" | "top" | "bottom" | "top" | Direction in which items expand from the toggle button. |
Interface - MenuItem (exported)
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactElement | none | The visual icon for the menu item. |
| name | string | none | Accessible label for the menu item. |
| metadata | any | none | Optional data for use in the onChange. |
| value | any | none | Optional value passed to the onChange. |