# UserMenu

> El avatar del footer del sidebar con el menú de la cuenta y el selector de tema.

```tsx
import { UserMenu } from "sebs7n-ui/user-menu"
```

## Ejemplos

### Con ítems propios

La fila «Tema» son `menuitemradio`: se recorren con las flechas y no cierran el menú.

```tsx
import { DropdownMenuItem } from "sebs7n-ui/dropdown-menu"
import { LogOutIcon, SettingsIcon } from "lucide-react"
import { UserMenu } from "sebs7n-ui/user-menu"

function Basico() {
  return (
    <div className="w-64 rounded-xl border border-gray-400 bg-background-200 p-2">
      <UserMenu
        signOut={
          <DropdownMenuItem>
            <LogOutIcon />
            Cerrar sesión
          </DropdownMenuItem>
        }
        user={{ name: "Ana Pérez", email: "ana@acme.com" }}
      >
        <DropdownMenuItem>
          <SettingsIcon />
          Ajustes de cuenta
        </DropdownMenuItem>
      </UserMenu>
    </div>
  )
}
```

## Props

### UserMenu

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `user` * | `UserMenuUser` | — | — |
| `align` | `"center" \| "start" \| "end"` | — | — |
| `collapsed` | `boolean` | — | Solo el avatar (con tooltip). Por defecto, el estado del <Sidebar> que lo contiene. |
| `labels` | `{ theme?: string; switcher?: Partial<ThemeSwitcherLabels> }` | — | — |
| `showTheme` | `boolean` | `true` | false para no mostrar la fila de tema. |
| `side` | `"top" \| "bottom" \| "left" \| "right"` | — | Lado del menú. Por defecto: "top" en el sidebar, "right" en el sidebar colapsado, "bottom" afuera. |
| `signOut` | `React.ReactNode` | — | Salida al final, tras un separador. Pasá un <DropdownMenuItem> neutral (no destructive). |
| `className` | `string` | — | — |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| Enter · Espacio | Abre. |
| ↑ ↓ | Recorre. |
| Escape | Cierra. |

## Accesibilidad

- La fila «Tema» son ítems `menuitemradio`: se recorren con flechas y **no** cierran el menú.
- Con el sidebar colapsado muestra solo el avatar, pero conserva el nombre accesible.
- `signOut` es un ítem neutral, **no** `variant="destructive"`: cerrar sesión no destruye nada.

## Reglas de uso

- Toma el estado del sidebar solo: no le pases `collapsed` a mano si está dentro de un `Sidebar`.
- `showTheme={false}` si la app ya tiene el selector de tema en otro lado.

## Relacionados

[dropdown-menu](/docs/components/dropdown-menu.md) · [sidebar](/docs/components/sidebar.md) · [theme-switcher](/docs/components/theme-switcher.md) · [avatar](/docs/components/avatar.md)