Barra lateral

Código

Copiar el marcado

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/sidebar.min.css" integrity="sha384-vt36+ffiZY/k7pMatnSg+vcsgcYLY2cJSuWh3NBijr6OCkoyR0URAZbP0j6jTpjY" crossorigin="anonymous">

<header>
  <button class="luz-nav-toggle" type="button" popovertarget="site-nav" aria-label="Menu">
    <span class="luz-nav-toggle__bar"></span>
    <span class="luz-nav-toggle__bar"></span>
    <span class="luz-nav-toggle__bar"></span>
  </button>
</header>

<nav class="luz-sidebar" id="site-nav" popover aria-label="Main">
  <div class="luz-sidebar__section">
    <div class="luz-sidebar__section-label">Account</div>
    <a class="luz-sidebar__link is-active" href="/profile/" aria-current="page">Profile</a>
    <a class="luz-sidebar__link" href="/billing/">Billing</a>
  </div>
</nav>

import { initSidebar } from "@luz-ds/catalog/sidebar";
initSidebar();

Variantes y opciones

Cómo funciona

Punto de referencia <nav>, con estilos de components/sidebar.css. En pantallas pequeñas es un panel lateral nativo de tipo popover.

• El botón de menú lo abre mediante popovertarget, sin scripts. El navegador se encarga de Escape, de cerrarlo al hacer clic fuera, de la capa superior y del estado expandido.
• initSidebar() de sidebar.js es opcional: marca el enlace de la sección visible en páginas largas (aria-current="true") y cierra el panel al seguir un enlace. catalog.js lo ejecuta en las páginas que tienen una barra lateral. Una página que solo carga core no tiene seguimiento del desplazamiento, y el cajón funciona sin él.
• El indicador de desplazamiento localiza los enlaces mediante .luz-sidebar__link y data-luz-spy: en cualquier elemento (como un <nav> de contenidos), sigue todos los enlaces internos que apuntan a una sección de la página (href="#…"). El atributo es el punto de conexión; el diseño de esos enlaces es cosa tuya.

Sin JavaScript

La barra lateral y el panel funcionan. El enlace actual es el que marcas en el marcado; no sigue el desplazamiento.

Teclado y ARIA

Tab recorre los enlaces en orden. En pantallas pequeñas, el botón de menú abre el panel; Escape o un clic fuera lo cierra y el foco vuelve al botón.

• Si la página tiene más de un <nav>, asígnale un nombre con aria-label.
• Marca la página actual con aria-current="page" y .is-active: la clase solo aporta el aspecto visual.
• El botón de menú conserva el nombre «Menú» tanto si el panel está abierto como cerrado; popover expone el estado.

El contraste y el foco se explican en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa una barra lateral para la navegación principal de una aplicación o de un sitio de documentación con muchas secciones.

Cuándo no usarlo

No uses una barra lateral en un sitio con pocas páginas: la navegación en la cabecera es más sencilla.

• Para mostrar la ruta hasta la página actual, usa migas de pan.
• Para los paneles de una misma página, usa pestañas.

Qué hacer y qué no

Cómo escribir el contenido

Pon a cada enlace el nombre de la página que abre, con una o dos palabras.

• Las etiquetas de sección son sustantivos: «Cuenta», «Facturación».
• Ordena los enlaces según la frecuencia con que se necesitan.

Contraste y foco

La barra lateral tiene sus propios tokens: texto claro sobre un panel oscuro en todos los modos y un enlace actual con fondo.

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

• Foco: el enlace recibe un contorno de 2 px dentro de su borde, del mismo color que su texto, para que el anillo tenga el contraste del propio enlace; los demás controles de la barra lateral usan --luz-sidebar-text-hover. El botón de menú tiene un contorno de 2 px --luz-focus-ring.
• No solo el color: el enlace actual tiene un fondo y lleva aria-current.
• Tamaño del objetivo: el botón de menú mide 44 px por lado.

Tokens que usa

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

Color

--luz-focus-ring, --luz-outline, --luz-scrim, --luz-sidebar-active-bg, --luz-sidebar-active-text, --luz-sidebar-bg, --luz-sidebar-border, --luz-sidebar-hover, --luz-sidebar-label, --luz-sidebar-logo-bg, --luz-sidebar-text, --luz-sidebar-text-hover, --luz-surface-hover, --luz-surface-page, --luz-text-primary

Spacing and sizing

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

Typography

--luz-font-mono, --luz-font-sans, --luz-text-md, --luz-text-sm, --luz-text-xl, --luz-text-xs

Radius

--luz-radius-md

Shadows

--luz-shadow-lg

Motion

--luz-duration-base, --luz-duration-fast, --luz-duration-slow, --luz-easing-standard

Layers

--luz-z-modal, --luz-z-sidebar

Layout and breakpoints

--luz-sidebar-width

El teclado y ARIA se explican en la pestaña Código.