# Header
> Encabezado del sitio: estructuras, comportamiento al hacer scroll, desplegables, estilos y combinaciones, con captura y página de ejemplo.
Categoría: Estructura · Solar v0.8.0
Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).
## Guía: Cuándo usarlo
El header encabeza todas las páginas de un sitio: muestra de quién es el sitio, lleva a sus secciones y da acceso a la cuenta. Elige la variante según el tipo de sitio y después arma la opción combinando estructura, comportamiento al hacer scroll, desplegables y estilo.
Variante | Para qué sitio | Opciones recomendadas
A · Header de sitio | Sitios de la CCS con pocas secciones (hasta 5). | E1, E2, M1 y cualquier estilo; combinaciones C1, C3 y C4.
B · Header extendido | Sitios con muchas secciones y públicos distintos. | E3, M2 y S3; combinación C2.
C · Header de aplicación | Sitios privados, con sesión, que se usan seguido. | E4 con menú izquierdo; combinación C5 y, en el celular, P3.
D · Header de landing (sugerido) | Eventos y campañas. Es una propuesta de partida: cada landing puede tener su propio header. | E2, E5, S1 o S4, y P4 en el celular.
-
Marca: si el sitio no tiene marca propia, va el logo de la CCS, una línea y el nombre del sitio. Si tiene marca propia, va solo su logo; el de la CCS queda en el footer.
-
Logo a la izquierda, siempre.
-
"Ingresar" es el nombre del botón para entrar a una cuenta en todos los sitios. Si hace falta decir a qué se entra, va en el aria-label.
-
Modo claro y oscuro: todos los headers llevan el botón, con la luna en modo claro y el sol en oscuro. Va junto a las acciones, antes de «Ingresar» o «Menú»; en las opciones de dos filas, al final de la fila de utilidades.
- Hasta 5 secciones en el header de sitio y 7 en el extendido. Desplegables de 2 niveles como máximo, con 6 enlaces o menos (más que eso, mega menú).
- Solo enlaces del sitio: lo de otros sitios va agrupado al final y marcado como externo.
Por qué:
Con el logo al centro, la gente falla unas 6 veces más al volver al inicio (Nielsen Norman Group, 2016). Un mismo nombre para entrar a la cuenta evita que la persona tenga que adivinar si «Portal», «Acceso» o «Sucursal virtual» son lo mismo.
Cada opción muestra una captura en escritorio. Al hacer clic se abre su página de ejemplo, donde se prueban el scroll, los menús y la vista en celular (achicando la ventana).
## Guía: Estructura
Dónde va cada cosa en la barra. Todas mantienen el logo a la izquierda y, en el celular, llevan el menú a un panel que se abre con el botón «Menú».
## E1 · Clásica
Logo y nombre del sitio a la izquierda, secciones a continuación y acciones a la derecha. Es la base del header de sitio (A) y sirve también en aplicaciones (C). Úsala cuando el sitio tiene hasta 5 secciones y quieres lo más reconocible.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/e1-clasica.html
```html
Saltar al contenido
```
## E2 · Navegación centrada
Tres columnas: marca a la izquierda, secciones al centro y acciones a la derecha, como el sitio de Solar. Úsala en sitios de 4 o 5 secciones con nombres cortos, en el header de sitio (A) o de landing (D).
Ejemplo en página completa: https://utiliza.me/solar/demos/header/e2-navegacion-centrada.html
```html
Saltar al contenido
```
## E3 · Dos filas: utilidades y secciones
Una fila delgada con lo que vale para todo el sitio (noticias, contacto, Ingresar) y otra con las secciones. La búsqueda es un campo a la derecha de las secciones (Buscador B1) y, bajo 1024 px, una lupa que la abre a pantalla completa (B2). Úsala en el header extendido (B), cuando hay 6 o 7 secciones. Cuida que no pase de 96 px de alto.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/e3-dos-filas-utilidades-y-secciones.html
```html
Saltar al contenido
```
## E4 · Buscador protagonista
La búsqueda ocupa el centro: es un campo de verdad con sugerencias (Buscador B1; Ctrl K lo enfoca) y, en el celular, la lupa la abre a pantalla completa (B2); las secciones quedan en «Menú», que en escritorio y tablet se abre como panel lateral a la derecha. Úsala en sitios con mucho contenido o en aplicaciones (B y C), solo si el buscador encuentra bien. Si la gente navega más de lo que busca, usa E1 o E3.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/e4-buscador-protagonista.html
```html
Saltar al contenido
```
## E5 · Menú a pantalla completa
La barra muestra solo el logo, el botón principal y «Menú»; al abrirlo, las secciones aparecen grandes sobre Ink. Sobre la foto no tiene fondo y, al bajar, toma fondo Ink para no perderse sobre el contenido (JavaScript del proyecto). Úsala en landings (D) cortas, de un evento o campaña. No en sitios con muchas secciones: en escritorio esconde la navegación.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/e5-menu-a-pantalla-completa.html
```html
Saltar al contenido
```
## E6 · Franja CCS y barra del sitio
Una franja Ink delgada con el logo de la CCS y «Más de la CCS», y debajo la barra del sitio con su nombre grande. Es una alternativa: la regla general es una sola barra. Úsala solo si se decide conectar varios sitios entre sí desde el header.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/e6-franja-ccs-y-barra-del-sitio.html
```html
Saltar al contenido
```
## Guía: Al hacer scroll
Cómo se comporta el header al bajar. Lo más simple es dejarlo fijo y siempre igual (no necesita JavaScript). Las cuatro opciones de abajo cambian de estado con el atributo data-estado que pone el JavaScript del proyecto; los estilos de cada estado ya vienen en las clases. La captura muestra el estado de arriba; abre la página completa y baja para ver el cambio.
## S1 · Píldora flotante que se ancla
Sobre la foto del hero es una píldora Ink translúcida separada de los bordes; al bajar se convierte en una barra blanca de ancho completo. Es el header del sitio de Solar. Úsala en portadas con foto, en el header de sitio (A) o de landing (D). Necesita JavaScript del proyecto.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/s1-pildora-flotante-que-se-ancla.html
```html
Saltar al contenido
```
## S2 · Transparente sobre la foto, sólido al bajar
Arriba no tiene fondo y deja ver el hero completo; al bajar toma fondo blanco. Úsala en portadas con una foto grande (A, B o D). La foto necesita una capa Ink de al menos 60 % para que el texto blanco se lea. Necesita JavaScript del proyecto.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/s2-transparente-sobre-la-foto-solido-al-bajar.html
```html
Saltar al contenido
```
## S3 · Se encoge al bajar
Arriba el header es alto y el logo grande; al bajar se compacta a 64 px. Da presencia de marca al llegar sin quitar espacio después. Úsala en el header extendido (B) o en portadas institucionales. El cambio debe ser rápido y sin saltos. Necesita JavaScript del proyecto.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/s3-se-encoge-al-bajar.html
```html
Saltar al contenido
```
## S4 · Se esconde al bajar y vuelve al subir
Libera la pantalla mientras se lee y reaparece apenas la persona sube. Úsala en páginas largas de lectura y en landings (A o D), sobre todo en el celular. Evítala si la gente sube seguido para releer. Necesita JavaScript del proyecto.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/s4-se-esconde-al-bajar-y-vuelve-al-subir.html
```html
Saltar al contenido
```
## Guía: Desplegables
Cómo se abre lo que hay dentro de una sección. Se abren con clic o con el teclado, nunca solo al pasar el cursor, y tienen 2 niveles como máximo. M1 y M2 usan : funcionan sin JavaScript; con JavaScript del proyecto se cierran al hacer clic afuera o con Esc.
## M1 · Lista con descripción
Panel chico bajo la sección, con una línea que dice qué resuelve cada enlace. Úsala cuando una sección tiene hasta 6 enlaces y sus nombres solos no bastan, sobre todo si son servicios. Más de 6 enlaces: M2.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/m1-lista-con-descripcion.html
```html
Saltar al contenido
```
## M2 · Mega menú con un destacado
Panel de ancho completo con grupos con subtítulo y, a la derecha, una sola tarjeta destacada con foto. Úsala en el header extendido (B), cuando una sección tiene más de 6 enlaces. La tarjeta lleva a algo útil, nunca es solo decoración. Los enlaces a otros sitios van en su propio grupo y con la flecha de externo.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/m2-mega-menu-con-un-destacado.html
```html
Saltar al contenido
```
## M3 · Panel que se transforma
Un solo panel que cambia de tamaño y se desliza al pasar de una sección a otra, sin cerrarse y volver a abrir. Se siente fluido. Úsala en sitios de marca (A o B) cuando el proyecto puede mantener el JavaScript: sin él no se abre. Debe funcionar con teclado (Tab, Enter, Esc), no solo con el cursor.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/m3-panel-que-se-transforma.html
```html
Saltar al contenido
```
## Guía: Estilo
El mismo header de sitio en cinco estilos, todos dentro de la marca. Sobre fondos de color, el texto va en blanco y el foco es un anillo blanco.
## T1 · Blanco
El más sobrio y legible, y la base del header de sitio (A), extendido (B) y de aplicación (C). Úsalo por defecto.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/t1-blanco.html
```html
Saltar al contenido
```
## T2 · Blanco con firma CCS
Igual que el blanco, con una línea de 4 px con el degradado de la marca arriba. Se reconoce como CCS sin cargar la barra. Úsalo cuando el sitio necesita más identidad sin perder sobriedad, por ejemplo en el header extendido (B).
Ejemplo en página completa: https://utiliza.me/solar/demos/header/t2-blanco-con-firma-ccs.html
```html
Saltar al contenido
```
## T3 · Ink
Barra oscura institucional con el logo blanco y verde y el botón verde. Distingue al sitio del resto sin dejar de ser CCS. Úsalo en el header de sitio (A) o de landing (D); en aplicaciones que se usan todo el día, mejor blanco.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/t3-ink.html
```html
Saltar al contenido
```
## T4 · Azul CCS
La barra en Azul CCS da la máxima presencia de marca. Úsalo en sitios cortos o landings (D). En sitios con muchas secciones cansa la vista: mejor T1 o T2.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/t4-azul-ccs.html
```html
Saltar al contenido
```
## T5 · Translúcido sobre foto
Ink al 55 % con desenfoque, sobre la foto del hero. Úsalo solo encima de una foto (con S1 o S2). Sobre contenido claro pierde contraste: usa otro estilo.
Ejemplo en página completa: https://utiliza.me/solar/demos/header/t5-translucido-sobre-foto.html
```html
Saltar al contenido
