# Bloom Menu

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.

> Composed · Pro · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/bloom-menu
```

## Import

```tsx
import { BloomMenu } from "@/components/ui/bloom-menu/bloom-menu";
```

## Variants

- `fab-actions` — FAB Actions: `npx @lumioui/cli add pro/bloom-menu-fab-actions`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `onOpenChange?` | `(open: boolean) => void` | — |
| `icon?` | `IconName` | FAB icon. Default "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. |
| `backdrop?` | `boolean` | Show a scrim behind the open menu. Default true. |
| `haptic?` | `boolean` | Haptic on open/close and action press. Default true. |
| `accessibilityLabel?` | `string` | a11y label for the FAB. Default "Open actions". |
| `className?` | `string` | — |

## Icons rendered

- `edit` — /icons.html?i=edit
- `share` — /icons.html?i=share
- `trash` — /icons.html?i=trash
- `plus` — /icons.html?i=plus

Source: https://lumioui.com/components/bloom-menu