Breadcrumb

Ruta de navegación jerárquica para indicar la ubicación actual dentro del sitio.

Estado: review

1. Estado por defecto y Current Page

Mostrar HTML

<nav class="gn-breadcrumbs" aria-label="Migas de pan">
  <ol class="gn-breadcrumbs__list">
    <li class="gn-breadcrumbs__item">
      <a href="#" class="gn-breadcrumbs__link">Inicio</a>
    </li>
    <li class="gn-breadcrumbs__item">
      <span class="gn-breadcrumbs__link gn-breadcrumbs__link--current" aria-current="page">Página actual</span>
    </li>
  </ol>
</nav>

2. Estado Hover

Mostrar HTML

<nav class="gn-breadcrumbs" aria-label="Migas de pan">
  <ol class="gn-breadcrumbs__list">
    <li class="gn-breadcrumbs__item">
      <a href="#" class="gn-breadcrumbs__link is-hover">Inicio</a>
    </li>
    <li class="gn-breadcrumbs__item">
      <span class="gn-breadcrumbs__link gn-breadcrumbs__link--current" aria-current="page">Página actual</span>
    </li>
  </ol>
</nav>

3. Estado Focus

Mostrar HTML

<nav class="gn-breadcrumbs" aria-label="Migas de pan">
  <ol class="gn-breadcrumbs__list">
    <li class="gn-breadcrumbs__item">
      <a href="#" class="gn-breadcrumbs__link is-focus">Inicio</a>
    </li>
    <li class="gn-breadcrumbs__item">
      <span class="gn-breadcrumbs__link gn-breadcrumbs__link--current" aria-current="page">Página actual</span>
    </li>
  </ol>
</nav>

4. Varios niveles de navegación

Mostrar HTML

<nav class="gn-breadcrumbs" aria-label="Migas de pan">
  <ol class="gn-breadcrumbs__list">
    <li class="gn-breadcrumbs__item">
      <a href="#" class="gn-breadcrumbs__link">Inicio</a>
    </li>
    <li class="gn-breadcrumbs__item">
      <a href="#" class="gn-breadcrumbs__link">Sección principal</a>
    </li>
    <li class="gn-breadcrumbs__item">
      <a href="#" class="gn-breadcrumbs__link">Subsección con nombre muy largo que podría acortarse</a>
    </li>
    <li class="gn-breadcrumbs__item">
      <span class="gn-breadcrumbs__link gn-breadcrumbs__link--current" aria-current="page">Página actual final</span>
    </li>
  </ol>
</nav>

Breadcrumbs

Las migas de pan (o *breadcrumbs*) indican la posición de la página actual dentro de la jerarquía de navegación del sitio web. Permiten a las personas usuarias comprender la estructura de las páginas y subir de nivel fácilmente.

Cuándo usarlo

En sitios web con estructuras jerárquicas profundas (3 niveles o más).
Como sistema de navegación secundaria complementario, no como reemplazo de la navegación principal.

Cuándo no usarlo

En webs muy simples o "flat" con solo 1 o 2 niveles de profundidad.
Como sustituto del menú de navegación principal.

Elementos y Estados Visuales

El componente incluye los siguientes estados visuales fieles al diseño:

Default: Enlaces con color neutro (#171717) y subrayado fino. Separadores iconográficos simples.
Hover: Enlace con un subrayado más grueso e identificable, y color destacado (#a3200b).
Focus: Halo visible doble (blanco interior, borde azul exterior) y un fondo traslúcido tenue acorde a especificaciones del sistema, garantizando contraste en accesibilidad teclado.
Current Page (Página actual): Texto en negrita y sin subrayado. Destaca visualmente la localización final sin confundir al usuario haciendo que parezca cliqueable.

Accesibilidad y Marcado Semántico

Contenedor: El bloque principal emplea un contenedor <nav> con el atributo aria-label="Breadcrumbs" (o equivalente en español como aria-label="Migas de pan") para identificar la zona de navegación para lectores de pantalla.
Listas ordenadas: Se usa <ol> y <li> para preservar el significado de jerarquía secuencial estricta.
Separadores: El icono separador tiene aria-hidden="true" y está dentro de una etiqueta neutra (<span>) que se oculta al lector de pantalla para no entorpecer la narración (la propia lista ordenada da contexto suficiente).
Página actual:

- El último nivel (página actual) se resuelve mediante un <span> en lugar de un enlace operativo <a> para evitar la redundancia de enlazar a la propia página y generar interacciones inútiles. - Para mayor corrección semántica y de asistencia, se utiliza aria-current="page" en dicho <span>, lo que notifica explícitamente a los lectores de pantalla que es el elemento final de la jerarquía activa.