Migaja de pan

Indique la ubicación de la página actual dentro de una jerarquía de navegación que agrega automáticamente separadores a través de CSS.

Ejemplo

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Cambiando el separador

Los separadores se agregan automáticamente en CSS a través de ::beforey content. Se pueden cambiar cambiando $breadcrumb-divider. Se necesita la función de comillas para generar las comillas alrededor de una cadena, por lo que si desea >como separador, puede usar esto:

$breadcrumb-divider: quote(">");

También es posible utilizar un icono SVG incrustado en base64 :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

El separador se puede eliminar $breadcrumb-dividerconfigurando none:

$breadcrumb-divider: none;

Accesibilidad

Dado que las migas de pan proporcionan una navegación, es una buena idea agregar una etiqueta significativa, como aria-label="breadcrumb"para describir el tipo de navegación proporcionada en el <nav>elemento, así como aplicar un aria-current="page"al último elemento del conjunto para indicar que representa la página actual.

Para obtener más información, consulte el patrón de ruta de navegación de la Guía de prácticas de creación de ARIA .