Bubble Menu Expand

Use Bubble Menu Expand for compact secondary actions; use Drawer Slide when the menu needs labels and structure.

Use

Revealing a small set of related actions from a compact trigger.

Avoid

Avoid it when hidden actions are primary or when users need to compare many options.

Safer Alternative

Drawer / Sidebar Slide

Risk Level

High attention

Timing

180-350ms with a short stagger; the menu should feel immediate.

Easing

Use ease-out or a lightly damped spring for each bubble.

Risk

overdesignedaccessibility sensitive

Live Demo

Edit

What It Is

A compact primary action expands into several nearby circular options, revealing secondary actions without navigating away.

Decision Guidance

Use Bubble Menu Expand for compact secondary actions; use Drawer Slide when the menu needs labels and structure.

Best For

Revealing a small set of related actions from a compact trigger.

Avoid When

Avoid it when hidden actions are primary or when users need to compare many options.

Timing

180-350ms with a short stagger; the menu should feel immediate.

Easing

Use ease-out or a lightly damped spring for each bubble.

Risk Tags

overdesignedaccessibility sensitive

Alternatives

Drawer / Sidebar Slide Popover Coach Step Staggered Menu Open

✓When to Use

Floating action buttons with a few related actions
Mobile toolbars with limited space
Creation menus such as Post / Upload / Scan

✕When NOT to Use

Menus with many items or long labels
Critical actions that need explanation
Desktop layouts where a normal toolbar is clearer

Configuration Tips

01Limit to three to five actions
02Preserve keyboard order and focus management
03Use labels or tooltips when icons are not universally understood

You've Seen It In

Material speed dialMobile creation menusCreative editing tools

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a floating action button that expands into three circular action buttons above it, with a short stagger and labels for accessibility.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function BubbleMenuExpand({ open }: { open: boolean }) {
  const actions = ['Scan', 'Upload', 'Note'];

  return (
    <div className="relative inline-flex">
      <div className="absolute bottom-full left-1/2 mb-3 flex -translate-x-1/2 gap-2">
        {actions.map((action, index) => (
          <button key={action} className={`h-12 w-12 rounded-full border border-stone-200 bg-white text-[10px] font-semibold text-stone-700 shadow-sm transition duration-200 ${open ? 'translate-y-0 scale-100 opacity-100' : 'translate-y-4 scale-75 opacity-0'}`} style={{ transitionDelay: `${index * 45}ms` }}>
            {action}
          </button>
        ))}
      </div>
      <button aria-expanded={open} className="h-14 w-14 rounded-full bg-stone-950 text-xl font-semibold text-white shadow-lg">
        +
      </button>
    </div>
  );
}

Related Effects

Tooltip Fade & Nudge

A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.

Drawer / Sidebar Slide

A panel that slides in from the left or right edge of the screen, pushing content or overlapping it with a dark backdrop.

Staggered Menu Open

A menu opens by revealing its items one after another, making the list structure readable without feeling like a sudden block of links.