Submenú

Código

Copiar el marcado

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/catalog@0.3.0/dist/components/submenu.min.css" integrity="sha384-y+7suWYL2a3Jot2cD9bCKS/ollQ/VHJGqkHQNIHmAEnQh1TyfrypOHFyhNk/3x3H" crossorigin="anonymous">

Un elemento de la lista de la barra de navegación de catalog, en una cabecera como la cabecera del sitio o la cabecera de periódico, cuyo contenido es un <luz-submenu> alrededor de un <details>: su <summary> es el botón y, a continuación, hay una lista de enlaces. No necesita clases: la etiqueta es el bloque y sus partes se identifican por su posición.

Asigna el mismo name a todos los submenús de la cabecera para que, al abrir uno, se cierren los demás.

<nav class="luz-navbar" id="site-nav" aria-label="Main" popover>
  <ul class="luz-navbar__list">
    <li><a class="luz-navbar__link" href="/" aria-current="page">Home</a></li>
    <li>
      <luz-submenu>
        <details name="site-menu">
          <summary>Wines</summary>
          <ul>
            <li><a class="luz-navbar__link" href="/wines/red/">Red wines</a></li>
            <li><a class="luz-navbar__link" href="/wines/white/">White wines</a></li>
          </ul>
        </details>
      </luz-submenu>
    </li>
    <li><a class="luz-navbar__link" href="/visits/">Visits</a></li>
  </ul>
</nav>

Variantes y opciones

No hay variantes. Los atributos son los del navegador.

Cómo funciona

CSS de @luz-ds/catalog y un <details> nativo. No usa JavaScript: ningún script define la etiqueta <luz-submenu>.

• El navegador lo abre y lo cierra, e informa a las tecnologías de asistencia de si está abierto. Se abre al hacer clic o tocar el botón, o al pulsar Enter o Espacio: nunca al pasar el puntero, así no se abre por accidente y funciona igual en una pantalla táctil.
• A 768 px o menos, dentro del menú de la cabecera, los enlaces del grupo se abren en el flujo, debajo del botón y con sangría, y empujan hacia abajo los enlaces siguientes.
• A partir de 769 px, cuando los enlaces de la cabecera están en una fila, se abren en un cuadro debajo del botón, por encima de la página, sin desplazarla. El cuadro del último elemento se abre hacia el inicio de la fila para que quepa en la ventana, en ambas direcciones de escritura.
• El chevrón se dibuja con dos bordes y no tiene texto: el estado es el que expone el navegador.
• No usa la API de popover: un popover aparece en la capa superior, así que no podría abrirse dentro del menú.

Sin JavaScript

No cambia nada: no hay ningún script. Los enlaces son enlaces normales.

Teclado y ARIA

• Orden: un submenú cerrado ocupa una parada: su botón. Cuando está abierto, sus enlaces aparecen justo después y, a continuación, el siguiente elemento de la cabecera.
• Teclas: Enter o Espacio en el botón lo abre y lo cierra; el foco permanece en el botón. Tab y Shift+Tab recorren los enlaces. Esc no hace nada en un submenú (consulta Problemas conocidos); en el menú de la cabecera a 768 px o menos, lo cierra y devuelve el foco al botón del menú.
• Nombres: el nombre del botón es su texto. El navegador expone el estado expandido de <summary>: no escribas aria-expanded, role="menu" ni role="menuitem"; son enlaces de un punto de referencia de navegación, no un menú de aplicación.
• Página actual: pon aria-current="page" en el enlace de la página, también dentro del submenú.

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

Diseño

Cuándo usarlo

Úsalo cuando la cabecera necesite más enlaces de los que caben en una fila corta y algunos pertenezcan al mismo grupo: tipos de vino, páginas sobre la empresa.

Cuándo no usarlo

No lo uses para un único enlace ni para ocultar páginas que necesita la mayoría de visitantes: ponlas en la propia fila.

• No anides un submenú dentro de otro: dos niveles ocultan páginas y son difíciles de usar con el puntero y el teclado.
• No pongas acciones, formularios ni ajustes: contiene enlaces a páginas. Para las acciones, usa botones o un menú desplegable.
• Si cada grupo tiene muchos enlaces, crea una página para cada grupo y enlázala: un submenú largo es una página dentro de un cuadro.

Sustituye la navegación desplegable creada con un script y el menú que aparece al pasar el puntero. No elimina nada de LUZ.

Buenas y malas prácticas

Redacción del contenido

Nombra el grupo con una o dos palabras, en estilo de frase, que indiquen qué contiene: «Vinos», «Sobre nosotros».

• Nombra cada enlace según la página que abre, para que tenga sentido fuera del grupo: «Vinos tintos», no «Tintos».
• No conviertas también el nombre del grupo en una página: el botón abre el grupo, no lleva a ningún sitio. Si el grupo tiene una página de presentación, ponla como primer enlace: «Todos los vinos».
• Mantén los mismos grupos y en el mismo orden en todas las páginas.

Contraste y foco

El botón y los enlaces de la fila aparecen sobre la página; a partir de 769 px, el cuadro tiene una superficie elevada, un borde y una sombra.

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. En el menú a 768 px o menos, los enlaces aparecen sobre la superficie de la página del menú, como en las dos primeras filas.

• Foco: contorno de 2 px de core con --luz-focus-ring, a 2 px del botón y de cada enlace.
• Al abrirse, el chevrón apunta hacia arriba y el texto del botón se oscurece: el estado nunca se indica solo con el color.
• El enlace de la página actual aparece subrayado, como en la fila.

Tokens que utiliza

Los 14 tokens que leen, por familia, las reglas de components/submenu.css del catálogo. Los enlaces del componente son los de la barra de navegación de catalog. 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, --luz-text-primary, --luz-text-secondary

Spacing and sizing

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

Typography

--luz-font-sans, --luz-text-md

Radius

--luz-radius-md

Shadows

--luz-shadow-md

Layers

--luz-z-overlay

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