Catálogo · Navegación

Barra de navegación

Coloca los enlaces principales de un sitio en una fila de la cabecera y, en pantallas estrechas, en un panel debajo.

Encaja mejor en: cualquier sitio — la barra de las secciones principales de un sitio, en la parte superior de la página

components/navbar.css
Sin JavaScript
Claro · Oscuro · Alto contraste
Con pruebas
3 problemas conocidos

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Ejemplo

Una barra con el nombre Acme y tres enlaces: Productos, Precios y Ayuda.

Acme

At 768 px of window width and below the links collapse into a menu. Its panel opens under this example's bar where the browser supports CSS anchor positioning, and under the top of the window, where a header sits, elsewhere.

Problemas conocidos

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, ocultando lo que hay detrás. Pulsa Escape para cerrarlo.

Cumple WCAG 2.4.11 (AA), pero no 2.4.12 (AAA).

Navegadores sin posicionamiento de anclas. En los navegadores compatibles con el posicionamiento de anclas CSS (Chrome y Edge 125, Safari 26 y Firefox 147), el panel se abre debajo de la barra, esté donde esté, incluso si hay un aviso o el banner de cookies encima. En los demás, se abre a --luz-bar-h desde la parte superior de la ventana: con texto ampliado y una barra que salta a una segunda fila, o con una banda por encima antes de desplazar la página, puede tapar parte de la barra. Escape o un clic fuera lo cierran.
Colores forzados en Firefox. No se dibuja la capa atenuada detrás del menú abierto, así que la página no se atenúa. El panel conserva su borde y sigue distinguiéndose.
Puntos de ruptura en Safari para Mac. Con las barras de desplazamiento siempre visibles, Safari no las cuenta en las consultas de medios por ancho (error 52653 de WebKit), así que el menú se contrae, o los enlaces vuelven a la fila, cuando la ventana supera los 768 px por hasta unos 15 px.

Código

Copiar el marcado

Bundler

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

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/navbar.min.css" integrity="sha384-0Ei6tmImyRUt2v+8h1nC5eFL476Rf4AFL1pDqjqETU8/+v4Of4/M+I+ZOzS49yN7" crossorigin="anonymous">

La barra de navegación va en la fila de una barra, después del botón de menú y del nombre del sitio. La barra es tuya o es una cabecera del catálogo, como la cabecera del sitio, que también establece el ancla bajo la que se abre el panel.

HTML

<header class="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 href="/">Acme</a>
    <nav class="luz-navbar" id="site-nav" aria-label="Main" popover>
      <ul class="luz-navbar__list">
        <li><a class="luz-navbar__link" href="/products/" aria-current="page">Products</a></li>
        <li><a class="luz-navbar__link" href="/pricing/">Pricing</a></li>
        <li><a class="luz-navbar__link" href="/support/">Support</a></li>
      </ul>
    </nav>
  </div>
</header>

Variantes y opciones

Clase o propiedad	Efecto
`.luz-navbar`	En el `<nav popover>`: una fila de la barra a partir de 769 px; un panel debajo, del ancho de la ventana, a 768 px o menos
`.luz-navbar__list`	El `<ul>`: una fila que salta de línea, sin viñetas; una columna dentro del panel abierto
`.luz-navbar__link`	Cada enlace mide al menos 44 px de alto; con `aria-current`, usa el color de texto principal y un subrayado de 2 px
`anchor-name: --luz-bar`	Se establece en la barra, con `anchor-scope: --luz-bar`, desde la cabecera de un tipo de sitio o por tu parte: el panel se abre debajo. Si no se establece, se abre a `--luz-bar-h` desde la parte superior de la ventana

Cómo funciona

Un popover nativo en <nav>, abierto con un .luz-nav-toggle mediante popovertarget. Sin JavaScript, el navegador gestiona Escape, el cierre al pulsar fuera, la posición del panel abierto en el orden de tabulación y el estado expandido del botón.

A partir de 769 px, el popover cerrado aparece como una fila de la barra y el botón de menú queda oculto.
A 768 px o menos, el panel queda fijo debajo de la barra, ocupa todo el ancho de la ventana y tiene una sombra y una capa atenuada que empieza debajo de la barra, para que esta nunca se atenúe.
Si el panel queda abierto cuando se amplía la ventana, permanece debajo de la barra hasta que se cierra.
Sin la API de popover, los enlaces permanecen en la fila y saltan de línea, y el botón de menú sigue oculto.
El submenú del catálogo (Submenú) puede ir dentro de un elemento de lista.

Sin JavaScript

No cambia nada: la barra de navegación usa HTML, un popover nativo y CSS.

Teclado y ARIA

Pulsa Tab para llegar a cada enlace, siguiendo el orden de la página.

En pantallas estrechas, cuando está cerrado, los enlaces no forman parte del orden de tabulación. Pulsa Enter o Espacio en el botón de menú para abrir el panel; la siguiente pulsación de Tab llega al primer enlace.
Pulsa Escape o haz clic fuera para cerrar el panel y devolver el foco al botón. El botón indica si está expandido.
Asigna al elemento <nav> un nombre que no tenga ninguna otra navegación de la página, como «Principal».
Marca la página actual con aria-current="page", o con "true" para la sección a la que pertenece una página.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa la barra de navegación para incluir los pocos enlaces principales de un sitio en la cabecera compartida por todas las páginas.

Cuándo no usarlo

No la uses en una aplicación con muchas secciones ni para los enlaces de una página.

Para muchas secciones o una jerarquía, usa la barra lateral.
Para indicar dónde está una página dentro de una jerarquía, usa las migas de pan.
Para las secciones de una página, usa pestañas o una lista de enlaces internos.

Qué hacer y qué no

Hazlo Usa pocos enlaces con nombres breves y subraya el actual: la fila se entiende de un vistazo.

No lo hagas Incluyas todos los enlaces del sitio en la barra: la fila salta de línea y no destaca ningún punto de entrada.

Cómo escribir el contenido

Nombra cada enlace según la página que abre, con una o dos palabras.

Incluye cinco enlaces como máximo; coloca el resto en el pie o en un submenú.
Nombra el botón de menú según lo que abre: «Menú».

Contraste y foco

Los enlaces usan el color de texto secundario de la página; el actual usa el color de texto principal y un subrayado.

Parte	Color sobre el fondo	Claro	Oscuro	Alto contraste	Requisitos
Enlace	`--luz-text-secondary` on `--luz-surface-page`	6.2:1	7.5:1	19.3:1	4.5:1
Enlace actual y su subrayado	`--luz-text-primary` on `--luz-surface-page`	15.8:1	15.1:1	21.0:1	4.5:1
Anillo de foco	`--luz-focus-ring` on `--luz-surface-page`	5.6:1	7.7:1	21.0:1	3:1

Medido a partir de los valores de los tokens de cada modo, redondeado hacia abajo. Los requisitos son los mínimos 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 recibe el anillo compartido de los enlaces: un contorno de 2 px --luz-focus-ring, a 2 px de distancia.
Enlace actual: el subrayado también lo identifica (línea roja 6) y se conserva con colores forzados.
Panel: usa la superficie de la página, un separador inferior y una sombra; la capa atenuada nunca cubre la barra.

Tokens que usa

Los 14 tokens que lee components/navbar.css, agrupados por familia. Cada familia enlaza a su página, con los valores de cada modo. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color: --luz-divider, --luz-scrim, --luz-surface-page, --luz-text-primary, --luz-text-secondary
Spacing and sizing: --luz-control-lg, --luz-space-2xs, --luz-space-lg, --luz-space-md, --luz-space-xs
Typography: --luz-font-sans, --luz-text-md
Shadows: --luz-shadow-lg
Layout and breakpoints: --luz-bar-h

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