Bubble Menu
A floating logo pill and menu button. Opening it pops the links out as big tilted bubbles over a blurred backdrop.
import { BubbleMenu } from "pleate/effects/bubble-menu";Site menu
Open the menu in the corner.
Props
- items
Links; color fills the bubble on hover and focus.
{ label, href, rotation?, color? }[]- logo
Left pill content.
ReactNode- position
Cover the viewport or the nearest positioned parent.
"fixed" | "absolute"default "fixed"- openLabel / closeLabel
Button names.
stringdefault "Open menu" / "Close menu"- label
Accessible name.
stringdefault "Main"
Accessibility
- The button is a disclosure with aria-expanded and aria-controls.
- Focus moves to the first link on open; Escape closes and returns focus.
- Reduced motion skips the pop.