Header

Pattern de cabecera con variantes básicas, de navegación, fullwidth, identificadas y móviles.

Estado: draft

Vista Previa

1. Cabecera básica (Mínima)

Variante orientada a herramientas internas o integradas. Incluye branding (logo GN) y nombre de la herramienta. Sin navegación ni acciones.

Herramienta

2. Cabecera básica con acciones

Variante con selector de idioma y botón de acceso en el lado derecho.

Portal de Ayudas

3. Cabecera básica con segundo logo y subtítulo

Sistema de Gestión

Departamento de Innovación

4. Cabecera con navegación principal

Incorpora el componente `nav-menu` como una fila adicional inferior. El borde de la barra principal pierde peso visual para cederlo a la navegación.

Sede Electrónica

5. Cabecera con navegación identificada (ID)

Cabecera por defecto (Desktop) con usuario identificado. Muestra el `.header__top` de color verde.

Sede Electrónica

6. Bloque de usuario: Persona Física (PF)

Ejemplo visual del bloque aislado para persona física (PF).

7. Bloque de usuario: Razón Social (PJ)

8. Bloque de usuario: Representación

9. Cabecera compacta Fullwidth con navegación

Todo incrustado en una única fila, abarcando el ancho máximo del contenedor.

App Interna

10. Cabecera compacta Fullwidth (Doble Navegación)

Portal Complejo

13. Variante Móvil (Cerrada)

Solo muestra el imagotipo, el nombre de la app y el botón hamburguesa. Se oculta la navegación y las acciones para liberar espacio.

Navarra.es

14. Variante Móvil (Abierta) con Usuario Logueado

Muestra el panel desplegable (`.header__mobile-panel`) con la navegación en bloque y el sub-bloque de usuario con acciones.

Navarra.es

15. Ejemplo de Integración con Dropdown Menu

Portal

# Header Pattern

El Header es el patrón compositivo más complejo del GN Design System. Organiza la cabecera de las aplicaciones y portales orquestando múltiples submódulos: branding institucional, nombre de la herramienta, selector de idioma, identificación de usuario y navegación.

¿Por qué es un Pattern y no un componente?

Un componente atómico (como un button o un dropdown) resuelve una interacción específica. El header, por el contrario, resuelve una estructura de layout de alto nivel. - Coordina y aglutina otros componentes funcionales (gn-button, nav-menu, dropdown-menu). - Debe reaccionar y cambiar su estructura interna dependiendo del contexto (app vs portal) y el viewport (Desktop vs Fullwidth vs Mobile).

Arquitectura y Variantes

El patrón se rige por bloques CSS BEM modulares que pueden encenderse o apagarse según las necesidades de la variante.

1. header (Básica o Default)

Orientado a herramientas en un contenedor centrado clásico (max-width: 1140px). Se construye usando: - .header__main: Barra principal con el logo institucional (ej. Logo GN), el .header__title y las .header__actions (como selector de idioma y botón "Acceder"). - Opcionalmente se añade un bloque secundario .header__nav-row que contiene el componente de navegación principal (nav-menu).

2. header con Bloque de Usuario (ID)

Para zonas privadas. Añade un nivel superior (.header__top) que incluye el .header__user-block con fondo destacado (verde). Este bloque identifica el estatus de la sesión (Persona Física, Razón Social, Representación) y aglutina el botón de desconexión.

3. header--fullwidth (Compacta / Compleja)

Orientada a dashboards o apps internas que aprovechan el 100% de la pantalla (max-width: 100%). - Suele comprimir todos los elementos en una única línea .header__main. - La navegación se incrusta usando .header__nav-inline. - Usa el imagotipo simplificado en lugar del logo completo para ahorrar espacio vertical y horizontal.

4. header--mobile

Comportamiento responsivo fundamental: - Oculta de serie la navegación y las acciones. - Revela un botón hamburguesa .header__menu-toggle. - Cuando este botón se acciona, el JS integrador debe añadir la clase .header--menu-open al contenedor .header, lo que revela el panel .header__mobile-panel. - Dentro de este panel se apilan en modo columna la navegación y, si aplica, el .header__user-block.

Reutilización de Componentes del Sistema

El header no recrea estilos que ya existen. Depende íntegramente de: - Navegación: nav-menu. - Menús emergentes (Idioma): Patrón anclado con gn-button disparando un dropdown-menu. - Acciones: gn-button en variantes --secondary, --tertiary o --sm.

Consideraciones de Accesibilidad

1. Semántica: Se utiliza <header> para el contenedor global y <nav> para las zonas de navegación (obligatorio aria-label para diferenciar navegación principal vs secundaria). 2. Jerarquía: El título de la herramienta es un <h1> con .header__title, proporcionando un punto de anclaje inicial para lectores de pantalla. 3. Móvil: El botón de apertura es un <button> real con aria-expanded="false", que deberá actualizarse a true mediante JS cuando se despliegue el panel. 4. Separadores Visuaes: .header__divider se declara con aria-hidden="true" para que no ensucie la locución.

*Nota técnica sobre branding:* Los isotipos o logos vectoriales insertados deben mantener el atributo aria-label descriptivo ("Gobierno de Navarra", "Navarra.es") para ser reconocibles si se usan como anclas a portadas.

HTML

<header class="header">
  <div class="header__main">
    <div class="header__container">
      <div class="header__brand">
        <a href="#" class="header__logo">
          <!-- Placeholder logo -->
          <svg viewBox="0 0 100 35" width="100" height="35" aria-hidden="true" fill="currentColor"><rect width="100" height="35" rx="4" /></svg>
        </a>
        <div class="header__divider" aria-hidden="true"></div>
        <div class="header__title-group">
          <h1 class="header__title">Herramienta</h1>
        </div>
      </div>
      <div class="header__actions">
        <button class="gn-button gn-button--secondary">
          <span class="gn-button__label">Acceder</span>
        </button>
      </div>
    </div>
  </div>
</header>