Ir al contenido
sebs7n-ui0.1.1
Navegación

UserMenu

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

Ver como .mdVer el código
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ú.

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

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

UserMenu

PropTipoPor defectoDescripción
user*UserMenuUser—
align"center" | "start" | "end"—
collapsedboolean—Solo el avatar (con tooltip). Por defecto, el estado del <Sidebar> que lo contiene.
labels{ theme?: string; switcher?: Partial<ThemeSwitcherLabels> }—
showThemebooleantruefalse 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.
signOutReact.ReactNode—Salida al final, tras un separador. Pasá un <DropdownMenuItem> neutral (no destructive).
classNamestring—

Teclado

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

DropdownMenuSidebarThemeSwitcherAvatar