Breadcrumb

Indica la ubicación de la página actual dentro de una jerarquía de navegación que añade automáticamente separadores vía CSS.

On this page

Ejemplo

Usa una lista ordenada o no ordenada con elementos de lista enlazados para crear un breadcrumb con estilo mínimo. Usa nuestras utilidades para añadir estilos adicionales según se desee.

html

<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 añaden automáticamente en CSS mediante ::before y content. Se pueden cambiar modificando una propiedad personalizada CSS local --bs-breadcrumb-divider, o a través de la variable Sass $breadcrumb-divider — y $breadcrumb-divider-flipped para su contraparte RTL, si es necesario. Por defecto usamos nuestra variable Sass, que está configurada como fallback de la propiedad personalizada. De esta manera, obtienes un divisor global que puedes sobrescribir sin recompilar CSS en cualquier momento.

html

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

Cuando se modifica vía Sass, la función quote es necesaria para generar las comillas alrededor de un string. Por ejemplo, usando > como divisor, puedes usar esto:

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

También es posible usar un icono SVG embebido. Aplícalo mediante nuestra propiedad personalizada CSS, o usa la variable Sass.

El SVG en línea requiere caracteres correctamente escapados. Algunos caracteres reservados, como <, > y #, deben estar codificados en URL o escapados. Hacemos esto con la variable $breadcrumb-divider usando nuestra función Sass escape-svg(). Al personalizar la variable CSS, debes manejar esto tú mismo. Lee las explicaciones de Kevin Weber en CodePen para más información.

html

<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 puedes eliminar el divisor configurando --bs-breadcrumb-divider: ''; (los strings vacíos en propiedades personalizadas CSS cuentan como un valor), o configurando la variable Sass a $breadcrumb-divider: none;.

html

<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 los breadcrumbs proporcionan navegación, es una buena idea añadir 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 más información, consulta el patrón de ruta de navegación de la guía de autoría ARIA.

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, las rutas de navegación ahora usan variables CSS locales en .breadcrumb para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen vía Sass, por lo que la personalización con Sass también sigue siendo compatible.

scss/_breadcrumb.scss

--#{$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 Sass

scss/_variables.scss

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