Ejemplos de cabeceras web que puedes editar y copiar
Ejemplos de cabeceras web
Ejemplos de cabeceras web: 10 diseños en vivo con HTML y CSS | We.Inc
10 diseños originales de cabecera web que puedes editar en vivo: distribuciones de logo y navegación, ubicación del CTA, cabeceras fijas, menús móviles sin JavaScript y una lista de comprobación.
La cabecera de un sitio web es la franja superior de cada página que contiene el logo, la navegación principal y normalmente un botón de acción. Las buenas cabeceras tienen de cinco a siete enlaces, ponen a la izquierda el logo enlazado a la página de inicio y se pliegan en un menú con etiqueta en los teléfonos. Abajo tienes diez diseños de cabecera originales con código editable.
Distribuciones de cabecera y cuándo usarlas
Distribución
Ideal para
Cuidado con
Logo a la izquierda, enlaces a la derecha
La mayoría de los sitios de empresa
Demasiados enlaces que empujan el CTA fuera de la pantalla
Logo a la izquierda, enlaces al centro, CTA a la derecha
Sitios de SaaS y de servicios
Necesita bastante ancho; pliégala antes
Logo centrado, enlaces debajo
Tiendas, restaurantes, medios
Una cabecera más alta ocupa más pantalla
Barra de utilidades sobre la barra principal
Negocios locales que viven del teléfono
Dos barras en móvil; únelas
Barra fija compacta
Páginas largas
Que tape los destinos de los anclas y el contenido
Las galerías de cabeceras suelen mostrar imágenes. Estas son cabeceras que funcionan, hechas en HTML y CSS sencillos con marcas inventadas, para que puedas redimensionar el marco, cambiar el código y copiar la versión que encaje con tu sitio.
Filtra los ejemplos por distribución o recorre los diez.
Edita el código de cualquier ejemplo; el marco aislado se redibuja mientras escribes.
Copia el HTML y el CSS y pon tu logo, tus enlaces y el texto de tu botón.
Repasa la lista de comprobación del final antes de publicar.
Envuelve los enlaces en un elemento nav con un aria-label y marca la página actual con aria-current="page".
El elemento header solo cuenta como landmark de banner de la página cuando no está dentro de article, aside, main, nav o section.
Las cabeceras fijas necesitan un valor top, como top: 0; si no, position: sticky se comporta como relative.
Añade scroll-margin-top a los encabezados cuando la cabecera sea fija, para que los enlaces de salto no oculten el encabezado bajo la barra.
Haz que cada zona táctil mida al menos 24 por 24 píxeles CSS para cumplir el tamaño de objetivo de WCAG 2.2 en el nivel AA; 44 píxeles es más cómodo.
Preguntas frecuentes
¿Qué debe incluir la cabecera de un sitio web?
El logo enlazado a la página de inicio, la navegación principal y, en la mayoría de los sitios de empresa, un botón principal como Reservar o Pedir presupuesto. Los negocios locales suelen añadir un número de teléfono. Deja fuera todo lo que los visitantes no necesiten en cada página.
¿Qué altura debe tener la cabecera de un sitio web?
No hay una regla fija. Entre 56 y 80 píxeles es habitual para una sola barra en escritorio, y algo menos en teléfonos. Una cabecera fija debe ser lo más baja posible porque tapa contenido todo el tiempo.
¿Puedo crear un menú móvil sin JavaScript?
Sí. Un elemento details con un summary como botón de menú abre y cierra los enlaces de forma nativa y funciona con el teclado. El ejemplo 6 de esta página usa ese enfoque. Un botón con JavaScript y aria-expanded te da más control sobre la animación y el cierre.
¿La cabecera debe ser fija?
En páginas largas donde la gente necesita a menudo el menú o el CTA, una cabecera fija compacta ayuda. En páginas cortas, sobre todo ocupa espacio. Si la usas, mantenla estrecha y comprueba que los enlaces internos aterrizan por debajo de ella.
Ubicación del logo, la navegación y el CTA
La gente busca el logo arriba a la izquierda y espera que la lleve a la página de inicio, así que respeta esa convención salvo que tu marca tenga un buen motivo para centrarlo. Pon el botón de acción en el extremo derecho, donde la vista termina de recorrer la barra.
Ordena los enlaces según lo que más necesitan los visitantes, no según tu organigrama. Servicios y precios suelen ir antes que Quiénes somos.
Cabeceras en teléfonos
Por debajo de unos 768 píxeles, la mayoría de las filas de enlaces ya no caben. Pliégalas detrás de un botón Menú bien etiquetado y mantén visible a su lado el CTA principal, ya que es el único enlace que se gana su espacio.
Prueba a 375 píxeles de ancho. Si algo se desplaza en horizontal, acorta las etiquetas o pliega antes.
Lista de comprobación de la cabecera web
Revisa esto antes de publicar
Comprobación
Por qué
El logo enlaza a la página de inicio
Es el comportamiento de cabecera más esperado
Los enlaces están dentro de un nav con etiqueta
Los lectores de pantalla lo presentan como navegación
La página actual está marcada con aria-current
Anuncia dónde está el visitante
Un solo botón principal, con un estilo distinto
Deja clara la acción principal
El botón de menú tiene una etiqueta de texto visible
Un icono solo es fácil de pasar por alto
Contorno de foco visible en cada enlace
Los usuarios de teclado ven dónde están
Sin desplazamiento horizontal a 375 px
Los teléfonos son donde las cabeceras fallan primero
Las barras fijas no ocultan los destinos de los enlaces de salto
Corrígelo con scroll-margin-top
1. Clásica: logo a la izquierda, enlaces y botón a la derecha
La distribución de empresa por defecto. El botón es el último elemento, así que es donde termina el recorrido visual.
2. Tres zonas: logo, enlaces centrados, CTA
Habitual en sitios de software. Un grid mantiene los enlaces realmente centrados sea cual sea el ancho del logo.
3. Logo centrado con enlaces debajo
Encaja en tiendas y restaurantes donde el nombre de la marca es el protagonista. Los enlaces pasan a una segunda fila en pantallas estrechas.
4. Barra de utilidades con teléfono sobre la barra principal
Para negocios locales que dependen de las llamadas: el número es un enlace tel: real para que los teléfonos puedan marcarlo.
5. Cabecera fija compacta
Desplázate dentro del marco. position: sticky con top: 0 mantiene la barra a la vista; el fondo translúcido sigue siendo legible sobre el contenido.
6. Menú móvil con details y summary, sin JavaScript
El summary es el botón Menú; el navegador gestiona la apertura, el cierre y el teclado. En pantallas anchas los enlaces se muestran en línea.
7. Cabecera oscura con buscador
El campo de búsqueda tiene una etiqueta visualmente oculta para que los lectores de pantalla lo sigan anunciando.
8. Cabecera transparente sobre una portada
La cabecera se apoya en el color de la portada. Mantén el contraste del texto en 4.5:1 o más frente a lo que haya detrás.
9. Cabecera de tienda con barra de anuncios
Una línea breve de anuncio sobre la barra lleva una oferta; el contador de la cesta va en el texto del enlace para que se lea en voz alta.
10. Cabecera móvil que mantiene visible el CTA
En teléfonos los enlaces se pliegan, pero el botón de reserva se queda junto al menú, ya que es la acción que importa.