Recomendado: Mantén la Topbar de gobierno en los sitios oficiales
La Topbar es la señal de legitimidad compartida por los sitios del Estado y ayuda a distinguirlos de sitios fraudulentos.
Header
El Header es la cabecera de los sitios del Estado: agrupa la Topbar de gobierno, el logo del sitio, el buscador, el acceso con ClaveÚnica (o la cuenta en sesión) y la navegación principal. Se adapta por sí solo entre escritorio y móvil.
Anatomía del componente
Cargando anatomía…
- Contenedor
- Topbar
- Barra principal
- Navegación principal
- Identidad institucional
- Buscador
- Acciones
Propiedades y configuraciones
Presentación
Compara las configuraciones disponibles para distintos contextos de uso.
La barra de gobierno, que va en todos los sitios oficiales.
Cuando usarlo
Úsalo como cabecera única en todas las páginas de un sitio o servicio del Estado, para que la persona reconozca que está en un sitio oficial, sepa dónde está y pueda buscar, navegar o ingresar con su ClaveÚnica.
Si solo necesitas navegar entre secciones de una misma página usa Tabs o Riel; para mostrar dónde está la persona dentro de la jerarquía usa Breadcrumbs bajo el header, no dentro de él.
Buenas prácticas
Recomendado: Limita la navegación principal a pocas secciones claras
Usa entre 3 y 6 opciones de nivel 1 con nombres cortos y orientados a lo que la persona viene a hacer.
Recomendado: Reemplaza ClaveÚnica por la cuenta al iniciar sesión
Antes del ingreso se muestra el CTA ClaveÚnica; con la sesión iniciada, ese lugar lo ocupa el Avatar desplegable.
Recomendado: Incluye el buscador cuando el sitio tiene mucho contenido
En portales con cientos de trámites o fichas, el buscador del header es la vía más rápida para llegar a lo que se necesita.
Malas prácticas
No recomendado: No satures el header con botones de acción
“Pagar”, “Agendar hora” o “Postular” pertenecen al contenido de la página donde se realizan, no al header.
No recomendado: No uses nombres largos o ambiguos en la navegación
Opciones como “Otros” o “Información de interés general” no dicen qué hay detrás y desordenan la barra.
No recomendado: No muestres ClaveÚnica y la cuenta al mismo tiempo
Si la persona ya ingresó, mantener el CTA ClaveÚnica la hace dudar de si su sesión está activa.
Recomendaciones de accesibilidad
Conserva el skip link como primer elemento
El enlace “Saltar al contenido principal” debe apuntar a un <main id="cl-main-content" tabindex="-1"> real de la página. Sin ese destino, el enlace no lleva a ningún lugar.
Usa un solo <header> y landmarks con nombre
El header se marca como <header> una única vez por página; la navegación de nivel 1 va en <nav aria-label="Principal"> y el menú móvil en <nav aria-label="Menú principal">, para que los lectores de pantalla distingan cada región.
Da nombre accesible al logo
El enlace del logo lleva aria-label="Ir al inicio" (o el nombre del sitio), y la franja y el escudo van con aria-hidden="true" para no anunciarse como contenido.
Nombra los botones-ícono
El botón hamburguesa (“Abrir menú”) y el de búsqueda móvil (“Buscar”) solo muestran un ícono: mantén su aria-label, y en el menú su aria-controls y aria-expanded sincronizados con el estado.
Etiqueta el buscador
El campo del header no tiene label visible; conserva aria-label="Buscar" (o uno más específico, como “Buscar trámites”) y no dependas solo del placeholder.
Describe el lockup de la Topbar
La imagen del lockup institucional necesita un alt con el texto de la marca (p. ej. “Gob.cl”), porque es la señal de sitio oficial.
Marca la sección actual
En la navegación principal, indica la sección en la que está la persona con aria-current="page" en el ítem correspondiente.
Última actualización: Octubre de 2026