Bloom React Component Library

The animation prop on <Menu.Root> accepts predefined string presets or a custom SpringConfig object to control the morphing feel.

<Menu.Root animation="snappy">    {/* Quick ease-out curve */}
<Menu.Root animation="gentle">    {/* Default, smooth spring */}
<Menu.Root animation="relaxed">   {/* Slower, laid-back spring */}

{/* Or use custom spring config */}
<Menu.Root animation={{ stiffness: 400, damping: 25 }}>

Use the direction and anchor props on <Menu.Root> to control the expansion path and alignment relative to the trigger.

<Menu.Root direction="top" anchor="start">    {/* Expands up, aligned to start */}
<Menu.Root direction="bottom" anchor="center"> {/* Expands down, centered */}
<Menu.Root direction="left" anchor="end">      {/* Expands left, aligned to end */}

Install bloom-menu along with its required peer dependency framer-motion using npm.

npm install bloom-menu framer-motion

To create a morphing menu, wrap your components in <Menu.Root> and <Menu.Container>. Use <Menu.Trigger> for the button content and <Menu.Content> for the expanded menu items. Each item should be wrapped in <Menu.Item>.

import { Menu } from 'bloom-menu'
import { MoreHorizontal, Pencil, Trash } from 'lucide-react'

function Example() {
  return (
    <Menu.Root>
      <Menu.Container buttonSize={48} menuWidth={200} menuRadius={12}>
        <Menu.Trigger>
          <MoreHorizontal />
        </Menu.Trigger>
        <Menu.Content>
          <Menu.Item onSelect={() => console.log('edit')}>
            <Pencil /> Edit
          </Menu.Item>
          <Menu.Item onSelect={() => console.log('delete')}>
            <Trash /> Delete
          </Menu.Item>
        </Menu.Content>
      </Menu.Container>
    </Menu.Root>
  )
}

Use DetailedAnimationConfig to fine-tune the spring physics and visual transitions of the menu. This object is passed to Menu.Root via the animationConfig prop.

Available keys:

• morphStiffness / morphDamping: Spring settings for shape morphing.
• contentStiffness / contentDamping: Spring settings for content fading.
• contentDelay: Delay in seconds before content appears.
• contentScale: Scale factor when content is hidden.
• triggerBlur: Blur amount in pixels for the trigger icon.
• contentBlur: Blur amount in pixels for the content.

The <Menu.Trigger> component contains the content shown when the menu is closed. It fades out when the menu opens.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional class names |
| `style` | `CSSProperties` | — | Additional styles |

The <Menu.Root> component provides the context for the menu system and handles state and expansion logic.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `boolean` | — | Controlled open state |
| `onOpenChange` | `(open: boolean) => void` | — | Callback when open state changes |
| `defaultOpen` | `boolean` | `false` | Default open state (uncontrolled) |
| `direction` | `"top" | "bottom" | "left" | "right"` | `"top"` | Menu expansion direction |
| `anchor` | `"start" | "center" | "end"` | `"start"` | Anchor alignment |
| `animation` | `"snappy" | "gentle" | "relaxed" | SpringConfig` | `"gentle"` | Animation preset |
| `closeOnClickOutside` | `boolean` | `true` | Close when clicking outside |
| `closeOnEscape` | `boolean` | `true` | Close when pressing Escape |

The <Menu.Item> component represents individual selectable items within the menu.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `onSelect` | `() => void` | — | Called when selected |
| `disabled` | `boolean` | `false` | Disable the item |
| `closeOnSelect` | `boolean` | `true` | Close menu after selection |

The <Menu.Portal> component renders the menu content in a portal.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `container` | `HTMLElement` | `document.body` | Portal target |

The <Menu.Container> component is the morphing element that animates between the button and menu states.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `buttonSize` | `number | { width, height }` | `40` | Closed button size (number for square, object for rectangular) |
| `menuWidth` | `number` | `200` | Open menu width |
| `menuRadius` | `number` | `24` | Open menu border-radius |

The <Menu.Content> component contains the content shown when the menu is open. It fades in with a slight delay.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional class names |
| `style` | `CSSProperties` | — | Additional styles |

The <Menu.Overlay> component provides an optional backdrop overlay.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | — | Additional class names |
| `onClick` | `() => void` | closes menu | Click handler |