Toggle Sidebar B
AppearanceLight & dark mode D
Bubble Menu
Floating circular expanding menu with staggered item reveal.
Default
Click the toggle to open the menu. The ease, colors, duration and stagger are wired to the controls underneath.
API Reference
BubbleMenu
| Prop | Type | Default | Description |
|---|---|---|---|
logo | string | undefined | Image src shown in the central bubble. Use the logo slot for custom content. |
menuAriaLabel | string | 'Toggle menu' | Accessible aria-label for the toggle button. |
menuBg | string | '#fff' | Background color for the logo and toggle bubbles and base pill background. |
menuContentColor | string | '#111' | Color for the menu icon lines and default pill text. |
useFixedPosition | boolean | false | If true positions the menu with fixed instead of absolute (follows viewport). |
items | MenuItem[] | DEFAULT_ITEMS | Custom menu items; each = { label, href, ariaLabel?, rotation?, hoverStyles?: { bgColor?, textColor? } }. |
animationEase | string | 'back.out(1.5)' | GSAP ease string used for bubble scale-in animation. |
animationDuration | number | 0.5 | Duration (s) for each bubble and label animation. |
staggerDelay | number | 0.12 | Base stagger (s) between bubble animations (with slight random variance). |
Events
| Prop | Type | Default | Description |
|---|---|---|---|
menu-click | (open: boolean) => void | - | Emitted whenever the menu toggle changes; receives the open state. |
Accessibility
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moves focus to the toggle, then through the menu links. |
| Enter + Space | Toggles the menu from the toggle button. |
- The toggle exposes aria-pressed, and the hidden overlay is aria-hidden while closed.