Bloom Menu

Pro

Floating action button that blooms into a column of labelled actions, nearest first. Drag across them to highlight one, and your pick stays lit for a moment before the menu closes.

Preview

Installation

npx @lumioui/cli add pro/bloom-menu

Usage

import { BloomMenu } from "@/components/ui/bloom-menu/bloom-menu";
<BloomMenu />

Examples

FAB Actions

A fitness log where the FAB blooms into the activity types you can start.

API reference

Prop Type Default
actions* BloomMenuAction[]

The actions that bloom out when the FAB is pressed.

 —
open boolean

Controlled open state. Omit + use defaultOpen for uncontrolled.

 —
defaultOpen boolean

Uncontrolled initial open state.

 false
onOpenChange (open: boolean) => void —
icon IconName

FAB icon. Default "plus".

 "plus"
closeIcon IconName

Icon when open — defaults to the same icon rotated 45°. Pass "x" for an explicit close glyph.

 —
direction "up" | "down"

Fan direction. "up" stacks actions above the FAB (default). "down" stacks them below.

 "up"
backdrop boolean

Show a scrim behind the open menu. Default true.

 true
haptic boolean

Haptic on open/close and action press. Default true.

 true
accessibilityLabel string

a11y label for the FAB. Default "Open actions".

 "Open actions"
className string —