Miga de pan

Ejemplo

Utiliza una lista ordenada o desordenada con elementos de lista vinculados para crear una miga de pan con un estilo mínimo. Utiliza nuestras utilidades para agregar estilos adicionales según lo desees.

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

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

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

Divisores

Los divisores se agregan automáticamente en CSS a través de ::before y content. Se pueden cambiar modificando una propiedad personalizada de CSS local --bs-breadcrumb-divider, o mediante la variable Sass $breadcrumb-divider — y $breadcrumb-divider-flipped para su contraparte RTL, si es necesario. Por defecto, utilizamos nuestra variable Sass, que se establece como alternativa (fallback) a la propiedad personalizada. De esta manera, obtienes un divisor global que puedes anular sin tener que volver a compilar CSS en cualquier momento.

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Inicio</a></li>
    <li class="breadcrumb-item active" aria-current="page">Biblioteca</li>
  </ol>
</nav>

Al realizar modificaciones a través de Sass, se requiere la función quote para generar las comillas alrededor de una cadena de texto. Por ejemplo, utilizando > como divisor, puedes usar esto:

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

También es posible utilizar un icono SVG incrustado. Aplícalo a través de nuestra propiedad personalizada de CSS, o usa 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="#">Inicio</a></li>
    <li class="breadcrumb-item active" aria-current="page">Biblioteca</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 puedes eliminar el divisor configurando --bs-breadcrumb-divider: ''; (las cadenas vacías en las propiedades personalizadas de CSS cuentan como un valor), o configurando la variable Sass a $breadcrumb-divider: none;.

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Inicio</a></li>
    <li class="breadcrumb-item active" aria-current="page">Biblioteca</li>
  </ol>
</nav>

$breadcrumb-divider: none;

Accesibilidad

Dado que las migas de pan proporcionan navegación, es una buena idea agregar una etiqueta significativa como aria-label="breadcrumb" para describir el tipo de navegación proporcionado en el elemento <nav>, 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, consulta el patrón de migas de pan de la Guía de Prácticas de Autoría de ARIA (APG).

CSS

Variables

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, las migas de pan ahora usan variables CSS locales en .breadcrumb para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

--#{$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};

Variables de Sass

$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:          var(--#{$prefix}secondary-color);
$breadcrumb-active-color:           var(--#{$prefix}secondary-color);
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;