Bubble Menu

A circular menu that expands with child elements positioned around a central button.

Demo

See the Bubble Menu component in action.

Installation

pnpm dlx shadcn@latest add https://shadcn-ui-variants.vercel.app/r/bubble-menu.json

Overview

A circular menu that expands with child elements positioned around a central button, inspired by material design principles. Perfect for contextual actions, tool palettes, or navigation menus.

Examples

Actions Menu

Creative Tools Palette

Navigation Wheel

Features

Smooth staggered animations
Auto-closes when clicking outside
Responsive hover states
Dark/light mode compatible
Fully customizable positioning

Styling Tips

For better visibility: You can add a border to child buttons:
<button className="size-full border-2 border-background ...">
For tooltips: Wrap child buttons with Tooltip component:
<Tooltip content="Delete"> <button>...</button> </Tooltip>
For groups: Use multiple BubbleMenus with different positions:
<BubbleMenu className="top-4 left-4">...</BubbleMenu> <BubbleMenu className="top-4 right-4">...</BubbleMenu>

BubbleMenu Props

Prop	Type	Default
children	`React.ReactNode`	—
radius	`number`	`60`
buttonSize	`number`	`40`
subButtonSize	`number`	`35`