Header (encabezado)

Tipos de header

Existen 2 tipos de header según la cantidad de navegaciones y el estado de la cuenta de la persona usuaria (con sesión iniciada y sin iniciar sesión).

Desktop deslogueado / En 1 línea

Desktop deslogueado / En 2 líneas

Desktop logueado / En 1 línea

Desktop logueado / En 2 líneas

Mobile

Anatomía

El header contiene el logo del Gobierno de la Ciudad de Buenos Aires, la navegación principal, un buscador y un acceso a la cuenta del perfil ciudadano. Una vez iniciada la sesión, la persona usuaria puede acceder a través de un menú desplegable a secciones relacionadas con su perfil. Dependiendo de la necesidad y el caso particular, se puede prescindir de algunos de estos elementos.

Logo

En la esquina izquierda del header se ubica el Logo del Gobierno de la Ciudad de Buenos Aires. Al hacer clic, se redirige a la página de inicio. Debe aparecer obligatoriamente en todas las versiones de header y contar con una etiqueta img con el atributo alt="Inicio".

Navegación principal

Contiene enlaces a las diferentes secciones de la web con estilos específicos para el header. Los enlaces también pueden tener un comportamiento de desplegable y mostrar subsecciones. Para desktop, las navegaciones ocupan el espacio disponible de un contenedor fijo, si hay más navegaciones de las que entran en el contenedor, pasan a una segunda línea y desaparecen de la primera. Como máximo, el header puede contener 7 enlaces de navegación.

Buscador

Permite que la persona usuaria busque contenido dentro del sitio. Se utiliza dentro del header cuando no hay un buscador en el cuerpo de la página. En mobile se despliega hacia abajo en forma de cajón al hacer clic en el botón de lupa.

Botón de acceso

Es un botón para acceder a la cuenta de perfil del ciudadano. En desktop se muestra con un ícono y una etiqueta, y en mobile se muestra sólo con ícono en un contenedor de ancho fijo.

Desplegable de perfil

Cuando la persona usuaria inicia sesión en su perfil, se suma al header un menú desplegable con distintos enlaces a secciones relacionadas con el perfil ciudadano como “Notificaciones” o “Cerrar sesión”. En desktop, el botón del desplegable presenta un ícono con el nombre de usuario, y en mobile la navegación del perfil pasa a ser parte del menú.

Especificaciones

El header siempre debe mantener los márgenes y espaciados especificados. De esta forma se genera una consistencia a través de todas las páginas que ayuda a la persona usuaria a navegar los contenidos de forma accesible e intuitiva.

Accesibilidad

Enlace «Saltar al contenido principal»

Para asegurar la navegación por lectores de pantalla o teclado, es necesario incluir un enlace oculto que le permita a la persona usuaria saltar el contenido del Header e ir directamente al cuerpo de la página.

Código HTML

<a href="#main" class="skip-to-main-content-link">Saltar al contenido principal</a>

. . .

</header>

Usabilidad

Buenas prácticas

Utilizar el header en todas las páginas del sitio web para generar una navegación consistente e intuitiva para la persona usuaria.

Mantener los textos de los enlaces de la navegación principal lo más cortos, concisos y explicativos posibles. Se recomienda un máximo de dos palabras por enlace. Para más información sobre los enlaces de navegación, consultar Navegación y pestañas.

Malas prácticas

No utilizar el header en otro lugar de la página que no sea el extremo superior.

No alterar la ubicación de cada uno de los componentes del header, ya que el orden corresponde a una lógica de navegación que debe mantenerse en todas las páginas del sitio.

No incorporar el buscador en el header si en el cuerpo de la página ya existe uno.

No utilizar más de 7 enlaces de navegación en el header.

No utilizar más de 7 subsecciones por cada navegación desplegable.

No incluir secciones relacionadas con el perfil en la navegación principal. Las mismas deben incluirse dentro del desplegable de perfil del ciudadano al iniciar sesión.