Cabecera del sitio

Código

Copiar el marcado

import "@luz-ds/catalog/components/site-header.css";

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/site-header.min.css" integrity="sha384-21PMBkvzBZetFOsMonT4oc4Ak41zobEeRyD0yfqjWd9UWhrz0PEpMPo/3hyvH1BH" crossorigin="anonymous">

<header class="luz-site-header o-sticky">
  <div class="o-container o-container--inline o-row">
    <button class="luz-nav-toggle" type="button" popovertarget="site-nav" aria-label="Menu">
      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></g></svg>
    </button>
    <a class="luz-site-header__brand" href="/">Acme Summit</a>
    <nav class="luz-navbar" id="site-nav" aria-label="Main" popover>
      <ul class="luz-navbar__list">
        <li><a class="luz-navbar__link" href="/programme/" aria-current="page">Programme</a></li>
        <li><a class="luz-navbar__link" href="/speakers/">Speakers</a></li>
        <li><a class="luz-navbar__link" href="/tickets/">Tickets</a></li>
      </ul>
    </nav>
    <div class="o-row luz-site-header__actions">
      <a class="luz-btn luz-btn--ghost" href="/account/">Log in</a>
    </div>
  </div>
</header>

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:

<header class="luz-site-header luz-site-header--publication o-sticky">
  <div class="o-container o-container--inline o-row">
    <button class="luz-nav-toggle" type="button" popovertarget="site-nav" aria-label="Sections">
      <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></g></svg>
    </button>
    <a class="luz-site-header__brand" href="/">The Vejer Review</a>
    <nav class="luz-navbar" id="site-nav" aria-label="Sections" popover>
      <ul class="luz-navbar__list">
        <li><a class="luz-navbar__link" href="/news/" aria-current="true">News</a></li>
        <li><a class="luz-navbar__link" href="/culture/">Culture</a></li>
        <li><a class="luz-navbar__link" href="/opinion/">Opinion</a></li>
      </ul>
    </nav>
    <div class="o-row luz-site-header__actions">
      <luz-search>…</luz-search>
      <luz-lang-switch>…</luz-lang-switch>
    </div>
  </div>
</header>

Variantes y opciones

Un modificador. La cabecera es una clase de catalog aplicada a un <header> nativo, maquetada en el HTML con los objetos de core.

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 <luz-lang-switch> 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 <nav> 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 <img> cuyo alt es el nombre, sin texto al lado.
• Puntos de referencia: un <header> que sea hijo directo de <body> es el banner. Pon el enlace para saltar al contenido antes.

Contraste y foco están en la pestaña Diseño.

Diseño

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.

Cuándo no usarla

No la uses en una aplicación: la barra de la aplicación 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.

Buenas y malas prácticas

Redacción del contenido

La marca es el nombre del sitio; los enlaces son los nombres de sus partes principales.

• Marca: el nombre tal como lo pronuncia la gente, entre una y tres palabras; el de una publicación, completo, como aparece en ella. Se ajusta en un ancho estrecho: nunca lo acortes con puntos suspensivos. El logotipo es decorativo: el enlace mantiene el nombre como texto.
• Enlaces: entre tres y seis, de una o dos palabras cada uno, con los mismos términos que los títulos de las páginas de destino. No añadas «Inicio» junto a una marca que ya lleva a la página de inicio.
• Acciones: un verbo que indique qué ocurre, como «Iniciar sesión». Botón del menú: «Menú», traducido como el resto de la página.

Contraste y foco

El texto aparece sobre la superficie de la página, tanto en la fila como en el panel abierto. La capa de atenuación empieza debajo de la cabecera, que nunca queda atenuada.

Calculado a partir de los valores de los tokens de cada modo, redondeado hacia abajo. El mínimo es el de WCAG 2.2 AA: 4,5:1 para el texto y 3:1 para los anillos de foco, los bordes y los iconos.

• Foco: cada enlace y botón de la cabecera conserva el anillo de core, de 2 px con --luz-focus-ring. El enlace actual también está subrayado, así que la marca no depende solo del color.
• Bordes: la línea bajo la cabecera (--luz-divider) es decorativa y no tiene un mínimo; se conserva con colores forzados.

Tokens que utiliza

Los 14 tokens que leen, por familia, las reglas de .luz-site-header en components/site-header.css. Cada familia enlaza a su página, donde están los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color

--luz-divider, --luz-surface-page, --luz-text-primary

Spacing and sizing

--luz-control-lg, --luz-space-2xs, --luz-space-lg, --luz-space-md, --luz-space-xs

Typography

--luz-font-heading, --luz-font-sans, --luz-text-base, --luz-text-lg, --luz-text-xl

Layout and breakpoints

--luz-bar-h

Teclado y ARIA están en la pestaña Código.