# user-menu

- 分组：组合组件（Composite）
- 页面：/components/user-menu
- 源码：packages/react/src/components/user-menu.tsx

## 导出

```ts
import { UserMenu } from "@modra/react";
```

## Props（UserMenuProps）

| 名称 | 必填 | 类型 | 说明 |
| --- | --- | --- | --- |
| `name` | 是 | `string` | Display name: first line of the trigger and the menu header. Also the collapsed trigger's accessible name. |
| `description` | 否 | `React.ReactNode` | Secondary line under the name (account, tenant, role...). |
| `avatarSrc` | 否 | `string` | Avatar image URL. When missing or failing to load, `avatarFallback` is shown. |
| `avatarFallback` | 否 | `React.ReactNode` | Fallback content of the avatar. Defaults to the first character of `name`. |
| `status` | 否 | `UserMenuStatus` | Presence dot on the avatar and a status line in the menu header. |
| `items` | 否 | `UserMenuItem[]` | Menu rows, in order. |
| `header` | 否 | `React.ReactNode \| false` | Replaces the account header at the top of the menu. `false` hides it. By default it shows the avatar, `name`, `description` and `status`. |
| `footer` | 否 | `React.ReactNode` | Rendered below the items, after a separator (e.g. a version line or a plan upsell). |
| `collapsed` | 否 | `boolean` | Collapses the trigger to the avatar. Defaults to the collapsed state of the enclosing `Layout.Sider`. |
| `side` | 否 | `"top" \| "right" \| "bottom" \| "left"` | Where the menu opens. Defaults to `top` (expanded) or `right` (collapsed). |
| `align` | 否 | `"start" \| "center" \| "end"` | Alignment against the trigger. Defaults to `start` (expanded) or `end` (collapsed). |
| `menuClassName` | 否 | `string` | Class name of the menu content. |
| `open` | 否 | `boolean` | Controlled open state. |
| `defaultOpen` | 否 | `boolean` |  |
| `onOpenChange` | 否 | `(open: boolean) => void` |  |
| `modal` | 否 | `boolean` | Set `false` to keep the page interactive while the menu is open. Defaults to `true`. |
| `className` | 否 | `string` |  |
| `children` | 否 | `React.ReactNode` |  |
| `disabled` | 否 | `boolean` |  |