Floating Menu
Navigation
A floating pill menu that expands into a card with GSAP-animated hamburger-to-X, text scramble effect, and staggered item reveals.
Loading preview...
Customize
Width320
Props
| Prop | Type | Default | Description |
|---|---|---|---|
sections | FloatingMenuSection[] | — | Array of menu sections. Each section has a title and items array. The first section renders items in large bold text, subsequent sections use smaller text. |
className | string | '' | Additional CSS classes for the wrapper. |
width | number | 320 | Width of the expanded menu in pixels. |
badge | React.ReactNode | — | Optional badge element displayed next to the menu button. |