Orientación constante
El visitante siempre sabe dónde está y a dónde puede ir. La navegación, idéntica en cada página, es el mapa que evita que alguien se pierda o se vaya por no encontrar el camino.
Módulo del sitio · Header
El Header: logotipo y navegación
La barra de marca y menú que va justo debajo del topbar. Es el mapa del sitio: dice quién eres, a dónde se puede ir y deja la conversión a un clic, en cada página.
No es una ficha técnica más: es el módulo entero, abierto y explicado. Qué problema resuelve y por qué se gana su lugar, de qué piezas se compone, dónde encaja en el layout y cómo está construido —el recorrido completo, del criterio de diseño a la implementación.
Y todo se apoya en un mismo principio: una única fuente de verdad. El menú no se escribe a mano en el componente: se genera iterando NAV en site.ts, la misma fuente para escritorio y móvil. Cambias una entrada y se actualiza, idéntica, en toda la navegación.
Definición
¿Qué es un header?
La barra de cabecera: logotipo + navegación principal, fija en la parte alta y repetida idéntica en todas las páginas.
El header (o cabecera) es la barra que corona cada página, justo debajo del topbar. Reúne dos cosas que el visitante busca por reflejo: la marca —arriba a la izquierda, como botón de «volver al inicio»— y el menú con las secciones del sitio. Es, literalmente, el mapa: de un vistazo se entiende qué hay y cómo llegar.
A diferencia del topbar, que es accesorio, el header es estructural: sin él, un sitio se siente perdido. Por eso se repite igual en cada página y cambia lo menos posible —la constancia es justo lo que lo hace útil—. Piensa en la señalización de un edificio: aburrida a propósito, porque su trabajo es que nunca te pierdas.
Función e importancia
¿Para qué sirve?
Hace tres trabajos a la vez: orientar, mostrar la marca y dejar la conversión siempre a mano.
Su función es ser el sistema de orientación del sitio. Mientras el hero presenta y el contenido convence, el header responde en todo momento a tres preguntas que el visitante trae consigo: «¿de quién es esto?», «¿a dónde puedo ir?» y «¿cómo doy el paso?». Tenerlas resueltas, en cada página, es lo que mantiene a la gente navegando en vez de abandonando.
Y ahí está su importancia: el header es el elemento que más se mira y más se usa de todo el sitio. Una navegación confusa o un logo que no lleva a la home cuestan visitas de inmediato. Bien resuelto, en cambio, es invisible: la gente lo usa sin pensar, que es exactamente la señal de que funciona.
Identidad a la vista
El logotipo, siempre arriba a la izquierda, ancla la marca y ofrece el «volver al inicio» que casi todos buscan por instinto al primer clic.
Conversión siempre cerca
Un único botón de acción (Cotizar) viaja en cada página: la puerta de conversión nunca queda a más de un clic, sin competir con otros botones.
Anatomía
¿Qué va en el header?
Cuatro piezas: la marca, la navegación, sus paneles desplegables y un botón de conversión.
Cada pieza cumple un papel claro. El logotipo ancla la identidad y devuelve a la home; la navegación reparte hacia las secciones; los paneles ordenan lo que tiene hijos; y el CTA deja la conversión siempre a la vista. Ni una sobra, ni una compite con otra.
Abajo lo ves montado con los datos reales de la plantilla. Cada punto numerado se desglosa en su tarjeta —qué resuelve y de qué dato de site.ts sale—, para que distingas de un vistazo qué es diseño y qué es contenido.
1 EJEMPLOS 4Cotizar
Logotipo
La marca, a la izquierda, enlazando a la home. Es el ancla de identidad y el «volver al inicio» que todos esperan por instinto. Aquí SÍ va el logo (en el topbar, no).
Dato SITE.brand · SITE.name
Navegación
Las secciones del sitio. No se hardcodea ningún enlace: se itera NAV, la misma fuente para escritorio y móvil. En móvil colapsa en el menú ☰.
Dato NAV
Paneles (mega / dropdown)
Las secciones con hijos despliegan un panel al pasar el cursor o con el teclado; su contenido sale de la taxonomía, no de una lista aparte.
Dato NAV[].panel · items
CTA · Cotizar
El botón de conversión a WhatsApp, siempre visible a la derecha. El enlace se arma con waUrl(); el mensaje precargado sale de WA_MESSAGES.
Dato waUrl(WA_MESSAGES.cotizacion)
Variantes
Otros diseños y aplicaciones
El de esta plantilla es un header clásico, pero la cabecera adopta muchas formas según el negocio.
No hay un único header: hay una barra de cabecera que cada tipo de sitio adapta a su objetivo. Una tienda añade buscador y carrito; una marca centra el logo; una aplicación pone acciones de usuario. Mismo lugar, prioridades distintas.
Abajo, seis variantes reales —cada una con su réplica en vivo y el tipo de proyecto donde brilla—. Sirven para reconocer cuál te conviene y para ver cómo el mismo molde se reescribe sin perder su sitio.
- OMarca InicioProductosServicios Cotizar
- TiendaHistoria OMarca BlogContacto
- OMarca Categorías ▾Ofertas Cuenta
- OTienda
- OApp
-
Responsive y móvil
Cómo se comporta en el teléfono
En móvil la navegación no cabe en una fila: se colapsa, se prioriza y se acerca al pulgar.
La barra de menú de escritorio no entra en un teléfono, así que el header se replantea: la marca se queda, y la navegación se pliega tras un botón ☰ que abre un panel. Es el patrón que todo el mundo ya conoce, y por eso funciona —no hay que enseñar a usarlo—.
A partir de ahí, manda la ergonomía: las secciones con hijos se vuelven acordeón, los destinos clave pueden bajar a una barra inferior en la «zona del pulgar», y el header puede condensarse al hacer scroll para ceder pantalla. Abajo, cuatro patrones, cada uno con su vista en el teléfono y una receta comentada.
Marca
1 · Hamburguesa + panel
El estándar: en móvil la barra de enlaces se oculta y aparece el botón ☰, que abre un panel a pantalla con las mismas secciones —generadas del mismo NAV—. Bloquea el scroll del fondo mientras está abierto.
/* HEADER MÓVIL · hamburguesa + panel (drawer)
El estándar: en móvil la nav colapsa en un botón ☰ que
abre un panel a pantalla completa. MISMO NAV que escritorio. */
@media (max-width: 1024px) {
.hdr-nav { display: none; } /* se oculta la barra de enlaces */
.hdr-burger { display: inline-flex; } /* aparece el botón ☰ */
}
/* JS: abrir/cerrar el panel y bloquear el scroll del fondo */
const btn = document.querySelector('.hdr-burger');
const nav = document.getElementById('mobile-nav');
btn.addEventListener('click', () => {
const open = nav.getAttribute('aria-hidden') === 'false';
nav.setAttribute('aria-hidden', open ? 'true' : 'false');
btn.setAttribute('aria-expanded', open ? 'false' : 'true');
document.body.style.overflow = open ? '' : 'hidden';
}); Marca
2 · Secciones en acordeón
Las entradas con hijos (los mega/dropdown del escritorio) se vuelven acordeón: un toque expande sus subsecciones; solo una abierta a la vez para no abrumar. Misma taxonomía, otra presentación.
/* PANEL MÓVIL · secciones en acordeón
Los mega/dropdown del escritorio se vuelven acordeón:
un toque expande sus hijos; solo una sección abierta a la vez. */
document.querySelectorAll('.mob-item__trigger').forEach((btn) => {
btn.addEventListener('click', () => {
const open = btn.getAttribute('aria-expanded') === 'true';
// cerrar las demás (una abierta a la vez)
document.querySelectorAll('.mob-item__trigger')
.forEach((o) => o.setAttribute('aria-expanded', 'false'));
btn.setAttribute('aria-expanded', open ? 'false' : 'true');
});
}); App
3 · Barra inferior (zona del pulgar)
En apps y catálogos con pocos destinos clave, la navegación baja al borde inferior —lo más cómodo de alcanzar con una mano—, con 3 a 5 íconos, objetivos de 44 px y respeto al área segura del iPhone.
/* NAVEGACIÓN INFERIOR (bottom nav) · estilo app
3–5 destinos en la «zona del pulgar». Objetivos ≥ 44px
y respeta el área segura del iPhone. */
@media (max-width: 640px) {
.bottom-nav {
position: fixed; inset: auto 0 0 0; z-index: 50;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: #fff; border-top: 1px solid #e8e8e8;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
min-height: 44px; display: grid; place-items: center;
gap: 2px; font-size: 11px; color: #374151; text-decoration: none;
}
} Marca
4 · Se condensa al hacer scroll
Al bajar, el header encoge —menos alto, una sombra sutil— para ceder pantalla al contenido; al volver arriba, recupera su tamaño. Da aire en lecturas largas sin esconder del todo la navegación.
/* HEADER QUE SE CONDENSA AL HACER SCROLL
Al bajar, el header encoge (menos alto + sombra) para
ceder pantalla; al volver arriba, recupera su tamaño. */
.site-header { transition: height .2s ease, box-shadow .2s ease; }
.site-header.is-shrink { height: 56px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
addEventListener('scroll', () => {
document.querySelector('.site-header')
.classList.toggle('is-shrink', scrollY > 40);
}, { passive: true });Posición
¿Dónde se coloca?
Justo debajo del topbar y por encima del contenido, de borde a borde. Es el segundo bloque del sitio en el orden de lectura.
Va pegado bajo el topbar: primero la barra utilitaria (contacto), luego el header (marca + navegación) y, debajo, el contenido de cada página. Ese orden no es casual —el visitante mira arriba a la izquierda buscando la marca y arriba a la derecha buscando el menú y la acción—.
En esta plantilla el header NO es fijo: se desplaza con el scroll (los paneles mega/dropdown viajan con él, anclados, en vez de quedar pegados al viewport). Es una decisión de diseño; arriba viste el patrón alterno —condensarse o quedarse fijo— para cuando un proyecto lo pida.
Implementación
Cómo está construido
Un componente que no hardcodea ningún enlace: itera NAV para generar los dos menús (escritorio y móvil) y sus paneles.
El header vive en Header.astro, pero no guarda su menú: lo genera iterando NAV en site.ts, la única fuente de verdad. El mismo array produce el menú de escritorio, los paneles desplegables y el menú móvil —añadir, quitar o reordenar una sección es editar NAV, y los tres se actualizan solos—.
Los paneles abren por hover Y por teclado (con un temporizador de gracia para que no se cierren al pasar el cursor), el menú móvil es un acordeón accesible, y el CTA se arma con waUrl(). Accesibilidad de fábrica: aria-haspopup/aria-expanded, foco gestionado y cierre con Escape. Estilos solo con tokens; ningún número de teléfono ni enlace escrito a mano.
En concreto: el componente (src/components/Header.astro) pone el
diseño y el comportamiento; el contenido (NAV en
src/config/site.ts) pone las entradas del menú. El componente recorre
NAV y, según cada ítem tenga panel: 'mega', 'dropdown' o
ninguno, dibuja un panel ancho, una lista compacta o un enlace directo.
El responsive es por colapso: en < 1024px la barra de enlaces se
oculta y aparece el botón ☰, que abre el menú móvil generado del MISMO
NAV. Así no hay dos menús que mantener: hay una fuente y dos presentaciones.
Buenas prácticas
Qué hacer y qué evitar
La diferencia entre un header que guía y uno que confunde está en unos pocos hábitos.
Ninguno de estos hábitos es capricho: salen de observar cómo usa la gente una cabecera. Un header que ayuda mantiene el menú claro, la marca enlazada y una sola acción; uno que estorba multiplica botones, esconde la navegación o mantiene dos menús desincronizados.
La ventaja es que se sostienen solos en cuanto respetas la fuente única: el menú sale de NAV, el CTA de waUrl(), y los estilos de los tokens. Abajo, lo que conviene y lo que conviene evitar, enfrentados.
Sí conviene
- Deriva TODO el menú de una sola fuente (NAV en site.ts); no hardcodees ningún <li>.
- Logo a la izquierda, enlazando a la home: es el «volver al inicio» que el visitante espera.
- Un solo CTA de conversión visible (Cotizar); que no compita con otros botones.
- En móvil colapsa en ☰ con un panel accesible (foco por teclado, aria-expanded), del MISMO NAV.
- Mantén ~7 ítems de primer nivel; agrupa el resto en paneles mega/dropdown.
Mejor evita
- No metas el logotipo en el topbar: la marca vive aquí, en el header.
- No dupliques el menú a mano para móvil: misma fuente NAV, un solo array.
- No abras los paneles solo por hover: deja también clic y teclado (accesibilidad).
- No amontones dos o tres CTAs compitiendo; el header lleva uno.
- No dejes datos DEMO (marca, enlaces) en producción.