Recomendado: Colócalo solo en sesión autenticada
Reemplaza el botón de ClaveÚnica cuando la persona ya ingresó, para que el header comunique que está dentro del servicio.
Avatar Menu
El Avatar desplegable identifica a la persona autenticada en el header y abre el menú de su cuenta. Reemplaza al CTA de ClaveÚnica una vez iniciada la sesión.
Anatomía del componente
Cargando anatomía…
- Contenedor
- Imagen
- Identidad
- Nombre
- Información secundaria
- Indicador de apertura
Propiedades y configuraciones
Imagen
Muestra la foto de la persona o, si no la hay, sus iniciales sobre el fondo de marca.
Usa la foto de la persona cuando el servicio la tiene.
Información
Muestra solo el nombre o suma líneas de metadata (`__meta`) según
Suficiente cuando la persona usa una sola cuenta en el servicio.
Cuando usarlo
Úsalo en el header de un sitio o servicio ya autenticado, dentro de las acciones (.cl-header__actions), para que la persona vea su identidad y pueda abrir el menú de cuenta (perfil, trámites, cerrar sesión, etc.).
Si solo necesitas representar a una persona sin interacción (listas, responsables, resultados), usa el componente Avatar.
Buenas prácticas
Recomendado: Muestra identidad y contexto útiles
Incluye el nombre y, cuando aporte valor, metadata breve como la institución o el último acceso, que refuerza la seguridad de la cuenta.
Recomendado: Usa iniciales cuando no haya fotografía
Si no hay foto disponible, muestra las iniciales del nombre. Evita un círculo vacío o una silueta genérica.
Recomendado: Reserva el menú para acciones de la cuenta
Las opciones deben ser de la persona en sesión: perfil, sus trámites y cerrar sesión. La navegación general del sitio va en el menú principal.
Malas prácticas
No recomendado: No lo uses como Avatar estático
Si no abre un menú de cuenta, no uses este componente: el chevron promete una acción. Para listar personas usa Avatar con su nombre.
No recomendado: No lo dejes sin nombre en escritorio
Solo con la foto, la persona tiene que adivinar qué cuenta está abierta, un riesgo en equipos compartidos o de atención en oficina.
No recomendado: No satures la metadata
Más de dos líneas (RUT, correo, dirección) convierten el header en un bloque denso y exponen datos personales innecesariamente.
No recomendado: No lo uses fuera del header de cuenta
No sirve para elegir personas dentro de un formulario. Para seleccionar a un beneficiario usa Select o Radio Button.
Recomendaciones de accesibilidad
Comunica el estado del menú
El trigger es un <button> con aria-haspopup y aria-expanded (abierto/cerrado). Mantén ese estado sincronizado cuando la persona abre o cierra el menú de cuenta.
Asegura un nombre accesible también en móvil
En viewport estrecho se ocultan nombre y metadata. El botón debe seguir anunciando de quién es la cuenta (p. ej. vía el texto visible en desktop o un nombre accesible equivalente cuando esos datos no se ven).
Trata la imagen y el chevron como decorativos
La foto/iniciales y el chevron no deben duplicar el anuncio del nombre. Mantén la imagen con alt="" / contenedor decorativo y el chevron con aria-hidden="true" cuando el nombre ya está en el control.
Permite operar con teclado
Abrir y cerrar el menú con Enter o Espacio, y recorrer las opciones del menú con el teclado sin trampas de foco.
Mantén el foco visible
Al navegar con teclado, el anillo de foco del trigger (y el de las opciones del menú) debe permanecer perceptible.
Asocia el menú al trigger
Cuando exista el panel de opciones, vincúlalo al botón (p. ej. aria-controls / id del menú) para que las tecnologías de asistencia relacionen control y contenido.
Incluye una acción clara de cierre de sesión
En servicios del Estado, “Cerrar sesión” debe ser encontrable y con nombre accesible dentro del menú; no dependas solo de un ícono.
Última actualización: Octubre de 2026