# Cabecera del sitio Inicia cada página de un sitio con su nombre, sus enlaces principales y algunos controles, en una fila que permanece arriba. ### Problemas conocidos Los problemas propios de la cabecera son los de las piezas de core que la componen. - **El panel del menú.** Si sigues pulsando Tab después del último enlace del menú abierto, el foco pasa a la página y el menú permanece abierto por encima; Esc lo cierra. Sin posicionamiento mediante anclas CSS, el panel y la lista de idiomas se abren desde la parte superior de la ventana, a la altura de una cabecera de una sola fila, así que con el texto ampliado pueden cubrir parte de la cabecera. Consulta los [problemas conocidos de la barra de navegación](https://nandovejer.github.io/luz/es/docs/catalog/navbar/#known-issues). - **Cabecera fija y texto ampliado.** El relleno de desplazamiento de `.o-sticky` es un mínimo: con el texto al 300 % y la cabecera repartida en varias filas, Safari puede dejar oculto un campo al que se llega con Tab. Define `scroll-padding-block-start` en `html` con la altura real de la cabecera o prescinde de `.o-sticky`. ### Copiar el marcado Header markup ```html ``` Un blog o un periódico añade el modificador, y la búsqueda y el selector de idioma de catalog van en las acciones: Publication header markup ```html ``` ### Variantes y opciones Un modificador. La cabecera es una clase de catalog aplicada a un `

` nativo, maquetada en el HTML con los objetos de core. - `.luz-site-header`: En `

`: la superficie de la página, una línea debajo, los espacios de la fila y el ancla bajo la que se abren sus paneles. - `.luz-site-header--publication`: Para un blog o un periódico: la marca es el nombre de la publicación, con la fuente de los títulos, más grande y subrayada al pasar el cursor; a 768 px y menos ocupa el espacio entre el botón de menú y las acciones y se ajusta ahí - `.luz-site-header__brand`: El nombre del sitio como enlace a la página de inicio: seminegrita, sin subrayar, de al menos 44 px de alto; ocupa el espacio libre de la fila.. Un `` de logotipo dentro mide 44 px de alto - `.luz-site-header__actions`: Al final de una fila `.o-row`: búsqueda, un [selector de idioma](https://nandovejer.github.io/luz/es/docs/catalog/lang-switch/) y un botón. - `.o-sticky` (core): Mantiene la cabecera arriba mientras se desplaza la página, en ventanas de al menos 30 rem de alto; consulta [la página y sus barras](https://nandovejer.github.io/luz/es/docs/components/layout/#objects-page). - `.o-container.o-container--inline.o-row` (core): La fila: el ancho y los márgenes interiores de la página; se ajusta en vez de desbordarse. - `.luz-nav-toggle`, `.luz-navbar` (catalog): El botón del menú y los enlaces: consulta la [barra de navegación](https://nandovejer.github.io/luz/es/docs/catalog/navbar/). ### Cómo funciona CSS de `components/site-header.css` de `@luz-ds/catalog` sobre los objetos de core y la barra de navegación de catalog. No usa JavaScript. - La cabecera solo añade la apariencia: la superficie de la página, la línea inferior, la marca y los espacios de la fila (8 px entre filas, 16 px entre elementos y 24 px a partir de 769 px). Core aporta el resto: `.o-sticky`, la posición fija y el relleno de desplazamiento; `.o-container--inline`, los márgenes interiores; `.o-row`, la fila adaptable; y la barra de navegación, los enlaces y su panel. - Una cabecera de una fila mide lo que `--luz-bar-h` de core: controles de 44 px, 4 px arriba y abajo y una línea de 1 px. Con el texto ampliado, la fila se ajusta y la cabecera crece. - La cabecera se asigna a sí misma el ancla `--luz-bar`. En los navegadores compatibles con el posicionamiento mediante anclas CSS, el panel de la barra de navegación y la lista del `` del sitio se abren debajo, con una o dos filas. En los demás se abren a `--luz-bar-h` desde la parte superior de la ventana. - Con el modificador, la marca es el nombre de la publicación: `--luz-font-heading` con `--luz-text-xl`, `--luz-text-lg` a 640 px y menos. - Sin `@luz-ds/catalog` no cambia nada: sus reglas adicionales no coinciden con ningún elemento. ### Sin JavaScript No cambia nada: el botón abre el menú como popover con `popovertarget`, sin scripts, y los enlaces son enlaces normales. ### Teclado y ARIA - **Orden:** botón del menú, marca, enlaces y, por último, acciones, en el orden del código fuente. Con el menú abierto, el siguiente Tab después del botón lleva a sus enlaces. - **Teclas:** Enter o Espacio en el botón abre y cierra el panel; Esc lo cierra y devuelve el foco al botón. - **Nombres:** el `

` tiene un `aria-label` («Principal»). El nombre del botón es «Menú»; el navegador expone si está expandido. El enlace actual tiene `aria-current="page"` y un subrayado. - **Marca:** un enlace, nunca un encabezado: el único `h1` de la página es su propio título. Un logotipo es un `` cuyo `alt` es el nombre, sin texto al lado. - **Puntos de referencia:** un `

` que sea hijo directo de `` es el banner. Pon el [enlace para saltar al contenido](https://nandovejer.github.io/luz/es/docs/components/skip-link/) antes. ### Cuándo usarla Usa la cabecera al principio de cada página de un sitio de landing, de un blog o de un periódico: permite reconocer el sitio y llegar desde cualquier página a sus partes principales. - La cabecera simple, para un sitio de landing, un producto o un evento. - Con `--publication`, para un blog o un periódico; para la portada de un periódico, donde el nombre y la fecha marcan el tono, usa la [cabecera de portada](https://nandovejer.github.io/luz/es/docs/catalog/masthead/). ### Cuándo no usarla No la uses en una aplicación: la [barra de la aplicación](https://nandovejer.github.io/luz/es/docs/catalog/app-bar/) es la barra del área principal junto a la barra lateral. - Una cabecera por página, nunca dentro de un componente: es el banner de la página. - Una página única que cabe en una pantalla necesita un encabezado y un enlace para saltar al contenido, no una cabecera.