Core · Navegación
Migas de pan
Muestra dónde se encuentra la página en el sitio mediante una ruta de enlaces a sus páginas superiores.
Ejemplo
La ruta hasta esta página, desde Documentación hasta la página que estás leyendo.
The trail at the top of this page is the same component.
Problemas conocidos
Ninguno conocido.
Código
Copiar el marcado
<nav aria-label="Breadcrumb">
<ol class="luz-breadcrumb">
<li><a class="luz-breadcrumb__item" href="/">Home</a></li>
<li><a class="luz-breadcrumb__item" href="/settings/">Settings</a></li>
<li><span class="luz-breadcrumb__item" aria-current="page">Billing</span></li>
</ol>
</nav>Variantes y opciones
No hay modificadores. CSS dibuja el separador entre dos elementos: no tienes que añadir nada para mostrarlo.
| Clase o atributo | Qué hace |
|---|---|
.luz-breadcrumb | La lista ordenada: una fila de elementos que ocupa más líneas si el espacio es estrecho. Cada <li> después del primero empieza con una barra |
.luz-breadcrumb | Un enlace a una página superior o la página actual como texto |
aria-current="page" | Indica la página actual con el color de texto principal y un grosor medio |
Cómo funciona
El patrón de migas de pan de APG: un punto de referencia <nav> que contiene una lista ordenada de enlaces, con estilos de components/breadcrumb.css. No necesita JavaScript.
- La lista es ordenada porque el orden transmite significado: los lectores de pantalla anuncian que es una lista y cuántos elementos tiene.
- La página actual es el último elemento, un
<span>conaria-current="page", no un enlace a sí misma. - El separador es un borde dibujado con
::beforey contenido vacío, así que la tecnología de asistencia no tiene nada que leer.
Sin JavaScript
No cambia nada: las migas de pan son una lista de enlaces y CSS. Sin CSS, se leen como una lista numerada.
Teclado y ARIA
Con Tab se llega a cada enlace superior en orden; Enter lo abre. La página actual no forma parte del orden de tabulación.
- Identifica
<nav>como «Migas de pan» conaria-label, para distinguirlo de la navegación principal. aria-current="page"indica a los lectores de pantalla qué elemento corresponde a la página actual.
El contraste y el foco están en la pestaña Diseño.
Diseño
Cuándo usarlo
Usa migas de pan cuando las páginas estén a tres o más niveles de profundidad, para que el lector sepa dónde está y pueda subir un nivel.
Cuándo no usarlo
No uses migas de pan en un sitio poco profundo ni como única navegación.
- Para las secciones principales del sitio, usa una barra lateral o una navegación en la cabecera.
- Para indicar los pasos de un proceso, muestra el número del paso en el encabezado de la página.
Qué hacer y qué no
Cómo escribir el contenido
Usa el título de cada página, abreviado si es largo.
- Empieza por la página de inicio o la parte superior de la sección.
- Termina con la página actual como texto, no como enlace.
Contraste y foco
Los enlaces usan texto secundario; la página actual usa texto principal.
| Parte | Color sobre el fondo | Claro | Oscuro | Alto contraste | Mínimo |
|---|---|---|---|---|---|
Enlace | --luz-text-secondary on --luz-surface-page | 6.2:1 | 7.5:1 | 19.3:1 | 4.5:1 |
Página actual | --luz-text-primary on --luz-surface-page | 15.8:1 | 15.1:1 | 21.0:1 | 4.5:1 |
Separador | --luz-text-muted on --luz-surface-page | 4.9:1 | 5.6:1 | 9.0:1 | 3: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 y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.
- Foco: cada enlace tiene el anillo compartido, un contorno de 2 px
--luz-focus-ringsituado a 2 px del texto. - No depende solo del color: la página actual no es un enlace y tiene un grosor mayor (500).
Tokens que usa
Los 6 tokens que lee components/breadcrumb.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.
- Spacing and sizing
--luz-space-xs- Typography
--luz-font-sans,--luz-text-sm
El teclado y ARIA están en la pestaña Código.