# Bloom menu

A shadcn/ui account menu for app headers: tap your avatar and it blooms into a card with your name, email and grouped links, then folds back.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available for the docs, pricing and about pages: append `.md` to the URL or send an `Accept: text/markdown` header (the home page answers the header too). An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).

## At a glance

- **Good for:** Account menus in SaaS and dashboard headers; Profile menus in community and creator apps; Workspace switchers and settings shortcuts; Admin panels and internal tools
- **Category:** Navigation · **Type:** Menus · **Style:** Motion, Minimal, Dark mode
- **See it:** [Live preview](https://www.craftui.space/docs/components/bloom-menu) · [Video](https://pub-52b0d9cec7c64f638ba3f33a29718fa6.r2.dev/Videos_product_cards/menus-bloom-menu.81d33ee3.mp4)

## Install

```bash
pnpm dlx shadcn@latest add https://www.craftui.space/r/bloom-menu.json
```

This is a paid item (CMP-KTF8E9): the install needs a craftUI plan or a purchase of it. Signed in, the docs page gives your personal install command. Plans: https://www.craftui.space/pricing

## Usage

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

export default function Page() {
  return <BloomMenu />;
}
```

With no props it renders with demo content; pass your own through the props below.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | `"Sophie Bennett"` | The person's name, at the top of the card. Its initials stand in when there's no avatar. Defaults to "Sophie Bennett". |
| `email` | `string` | `"sophie@acme.co"` | A line under the name, usually the email. Defaults to "sophie@acme.co". |
| `avatar` | `string` | `"https://images.unsplash.com/photo-1580489944761-15a19d654956?w=160&h=160&q=80&…` | The avatar photo's URL; leave empty for initials. Defaults to a demo portrait. |
| `groups` | `BloomMenuItem[][]` | `built-in demo content` | The items, in groups split by a thin line. Defaults to `bloomMenuGroups`, a SaaS workspace's menu. |
| `align` | `"end" \| "start"` | `"end"` | Which corner the card grows from: "end" for an avatar on the right of a header, "start" for one on the left. Defaults to "end". |
| `open` | `boolean` | — | Whether it's open, if you control it. |
| `defaultOpen` | `boolean` | `false` | Whether it starts open, if you don't. Defaults to false. |
| `onOpenChange` | `(open: boolean) => void` | — | Called when it opens or closes. |
| `label` | `string` | `"Account menu"` | What the avatar button says to screen readers. Defaults to "Account menu". |

It also accepts every `<div>` attribute (`className`, `id`, `aria-*` and so on).

### `BloomMenuItem`

| Field | Type | Description |
| --- | --- | --- |
| `label` (required) | `string` | The item's name. Must be unique in its group. |
| `icon` | `ReactNode` | An 18px icon before the label, e.g. an inline SVG. |
| `badge` | `ReactNode` | Something small at the end of the row, e.g. a "Pro" pill or a count. |
| `href` | `string` | Makes the item a link. |
| `onSelect` | `() => void` | Called when the item is picked (after a link's own navigation starts). The menu closes either way. |
| `active` | `boolean` | Marks the page you're on, with a soft fill. |

## Files

The install adds:

- `components/ui/bloom-menu.tsx`

npm dependencies (installed for you): `motion`.