# User Menu

> The signed-in account at the foot of a sidebar: avatar, name and email, opening a menu with profile, settings and sign-out.

Component · Navigation · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/UserMenu/)

The signed-in account at the foot of a sidebar: avatar, name and email, opening a menu with
profile, settings and sign-out.

- `items` are `Menu` items (icons, shortcuts, `"-"` separators, `danger`).
- `compact` shows only the avatar, with the name as its accessible label; use it in a collapsed
  sidebar (`footer={({ collapsed }) => <UserMenu compact={collapsed} … />}`).
- The menu opens above the trigger by default (`side="top"`); use `side="bottom"` at the top of a
  page.

## Example

```tsx
import { Card, UserMenu } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <div className="tf-row" style={{ gap: 24, alignItems: "flex-start", flexWrap: "wrap" }}>
      <Card style={{ width: 280, minHeight: 0 }}>
        <UserMenu
          name="Mara Ellis"
          email="mara@halo.app"
          side="bottom"
          items={[
            { label: "Profile", icon: "user" },
            { label: "Settings", icon: "settings" },
            { label: "Keyboard shortcuts", icon: "terminal", shortcut: "?" },
            "-",
            { label: "Sign out", icon: "logout" },
          ]}
        />
      </Card>
      <Card style={{ minHeight: 0 }}>
        <UserMenu
          name="Jonah Petit"
          compact
          side="bottom"
          items={[{ label: "Profile", icon: "user" }, "-", { label: "Sign out", icon: "logout" }]}
        />
      </Card>
    </div>
  );
}
```

## Props

### UserMenu

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `email?` | `string` |  |
| `avatar?` | `string` | Picture URL; initials otherwise. |
| `items?` | `(MenuItem \| "-")[]` | The menu: profile, settings, sign out … |
| `compact?` | `boolean` | Only the avatar (a collapsed sidebar). |
| `side?` | `"top" \| "bottom"` | Where the menu opens (default `top`, for the foot of a sidebar). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Card

| Prop | Type | Notes |
| --- | --- | --- |
| `title?` | `string` |  |
| `description?` | `string` |  |
| `meta?` | `string[]` |  |
| `corner?` | `ReactNode` |  |
| `status?` | `ReactNode` |  |
| `actions?` | `ReactNode[]` |  |
| `tint?` | `Tint \| "surface"` |  |
| `onClick?` | `() => void` |  |
| `children?` | `ReactNode` |  |
| `eyebrow?` | `ReactNode` |  |
| `surface?` | `Surface` | `"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Menu

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `(MenuItem \| "-")[]` | Required |
| `label?` | `string` | Accessible name of the menu. |
| `autoFocus?` | `boolean` | Focus the first item on mount (menus opened from a button or the keyboard). |
| `onClose?` | `() => void` | Called after an item runs, and on Escape, so the owner can close the menu. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Avatar

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Required |
| `src?` | `string` |  |
| `size?` | `number` |  |
| `tint?` | `Tint \| "surface-sunken"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |