Breadcrumbs

# 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.

<nav class="breadcrumbs" aria-label="Breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Inicio</a>
    </li>
    <li class="breadcrumbs__item" aria-hidden="true">
      <span class="breadcrumbs__separator">
        <svg viewBox="0 0 24 24" width="21" height="21" aria-hidden="true" focusable="false">
          <path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </span>
    </li>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Sección</a>
    </li>
    <li class="breadcrumbs__item" aria-hidden="true">
      <span class="breadcrumbs__separator">
        <svg viewBox="0 0 24 24" width="21" height="21" aria-hidden="true" focusable="false">
          <path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </span>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__link breadcrumbs__link--current" aria-current="page">Página actual</span>
    </li>
  </ol>
</nav>