Navegación

AccountMenu

El botón de avatar al final de la cabecera de una app. Abre un menú que empieza con quién ha iniciado sesión y luego tus opciones: perfil, ajustes, cerrar sesión.

import { AccountMenu, MenuItem, MenuSeparator } from '@alea-design/ui';

Ejemplos

Menú de cuenta

El avatar es el botón. El menú empieza con quién ha iniciado sesión y luego tus opciones. onAction recibe el id de la opción.

Tokens

Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.

Color

--alea-text…
--alea-text-muted…

Space

--alea-space-0-5…
--alea-space-3…

Type

--alea-font-family-body…
--alea-font-size-md…
--alea-font-size-sm…
--alea-font-weight-semibold…

Props

`AccountMenu` props

Ver 3 props heredadas

El botón de avatar al final de una cabecera que abre el menú de cuenta: quién ha iniciado sesión arriba, luego perfil, ajustes y cerrar sesión.

Prop	Tipo	Por defecto	Descripción
`children`obligatoria	`ReactNode \| ((item: object) => ReactNode)`		Los MenuItem, MenuSection y MenuSeparator: perfil, ajustes, cerrar sesión.
`name`obligatoria	`string`		El nombre de la persona: las iniciales del avatar y la primera línea de la cabecera del menú.
`aria-label`	`string`	`"{name}, account menu"`	Nombre del botón del menú. Por defecto "{name}, account menu".
`className`	`string`	ninguno	Clases extra para la ventana emergente.
`footer`	`ReactNode`	ninguno	Contenido debajo de los elementos, sin foco: una versión, una pista.
`maxHeight`	`number`	ninguno	Altura máxima antes de tener scroll, en px.
`menuProps`	`Omit<MenuProps<object>, "children">`	ninguno	Props del menú: onAction, selectionMode, selectedKeys, items, disabledKeys...
`minWidth`	`string \| number`	`200`	Ancho mínimo del menú, cualquier medida CSS. Por defecto 200 px.
`motion`	`MotionProp`	ninguno	Cómo entra y sale el popup: un preset (fade, scale, pop, slide-down, blur...), false para ninguno, u opciones.
`onAction`	`((key: string \| number) => void)`	ninguno	Se llama con el id del elemento del menú.
`placement`	`"start" \| "end" \| "bottom end" \| "bottom start" \| "bottom" \| "top" \| "bottom left" \| "bottom right" \| "top left" \| "top right" \| "top start" \| "top end" \| "l…`	`"bottom end"`	Dónde se abre. Por defecto bottom start.
`secondary`	`ReactNode`	ninguno	Una segunda línea en la cabecera del menú: un correo o un rol.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tamaño del botón: sm 32, md 40 (predeterminado, como los demás botones de la cabecera), lg 48.
`src`	`string`	ninguno	La foto. Sin ella se muestran las iniciales.
`style`	`CSSProperties`	ninguno	Estilo en línea para la ventana emergente.

Especificaciones

Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.

Variantes: placementstartendbottom endbottom startbottomtopbottom leftbottom righttop lefttop righttop starttop endl…
sizesmmdlg
Motion: Acepta una prop motion para su entrada y salida.
Oscuro y claro: Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
Clases para estilos: .alea-account-menu.alea-account-head.alea-account-text.alea-account-name.alea-account-secondary

El avatar es un botón real con el nombre "{name}, account menu"; cambia aria-label para modificarlo.
El menú es un botón de menú: las flechas se mueven, Escape lo cierra y el foco vuelve al avatar.
Quién ha iniciado sesión se muestra en la cabecera del menú como texto, no en el botón, así que se lee al abrir el menú.

Teclado

Tecla	Acción
`Enter` o `Espacio`	Abre el menú desde el avatar
`Arriba` o `Flecha abajo`	Opción anterior o siguiente
`Esc`	Cierra el menú y vuelve al avatar

Qué hacer y qué evitar

Hacer

Limítalo a cinco opciones o menos: perfil, ajustes, ayuda, cerrar sesión.
Pon cerrar sesión al final, tras un separador.
Usa el mismo tamaño que los demás botones de la cabecera (el predeterminado, 40 px).

Evitar

No lo uses como selector de espacio de trabajo: usa WorkspaceSwitcher en la barra lateral.
No pongas el nombre de la persona en el botón junto al avatar: la cabecera se satura.