Migaja de pan

Ejemplo

Use una lista ordenada o desordenada con elementos de lista vinculados para crear una ruta de navegación con un estilo mínimo. Utilice nuestras utilidades para agregar estilos adicionales según lo desee.

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

Divisores

Los divisores se agregan automáticamente en CSS a través de ::beforey content. Se pueden cambiar modificando una propiedad personalizada de CSS local --bs-breadcrumb-divider, o a través de la $breadcrumb-dividervariable Sass, y $breadcrumb-divider-flippedpara su contraparte RTL, si es necesario. Usamos de forma predeterminada nuestra variable Sass, que se establece como una alternativa a la propiedad personalizada. De esta manera, obtiene un divisor global que puede anular sin volver a compilar CSS en ningún momento.

<nav style="--bs-breadcrumb-divider: '>';" 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>

Al modificar a través de Sass, se requiere la función de comillas para generar las comillas alrededor de una cadena. Por ejemplo, usando >como divisor, puede usar esto:

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

También es posible utilizar un icono SVG incrustado . Aplíquelo a través de nuestra propiedad personalizada CSS, o use la variable Sass.

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" 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>

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

También puede eliminar la configuración del divisor --bs-breadcrumb-divider: '';(las cadenas vacías en las propiedades personalizadas de CSS cuentan como un valor) o configurar la variable Sass en $breadcrumb-divider: none;.

<nav style="--bs-breadcrumb-divider: '';" 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>

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

CSS

Variables

Como parte del enfoque de variables CSS en evolución de Bootstrap, las migas de pan ahora usan variables CSS locales .breadcrumbpara mejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
  

Sass variables

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;