Miga de pan

Indique a localización da páxina actual dentro dunha xerarquía de navegación que engade automaticamente separadores mediante CSS.

Nesta páxina

Exemplo

Use unha lista ordenada ou sen ordenar con elementos de lista vinculados para crear unha ruta de navegación de estilo mínimo. Use as nosas utilidades para engadir estilos adicionais segundo o desexe.

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>

Separadores

Os divisores engádense automaticamente en CSS mediante ::beforee content. Pódense cambiar modificando unha propiedade personalizada de CSS local --bs-breadcrumb-dividerou a través da $breadcrumb-dividervariable Sass e $breadcrumb-divider-flippedpara a súa contraparte RTL, se é necesario. Utilizamos por defecto a nosa variable Sass, que se establece como unha alternativa á propiedade personalizada. Deste xeito, obtén un divisor global que pode anular sen recompilar CSS en calquera 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>

Cando se modifica mediante Sass, é necesaria a función de comiñas para xerar as comiñas arredor dunha cadea. Por exemplo, usando >como divisor, podes usar isto:

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

Tamén é posible usar unha icona SVG incorporada . Aplícao a través da nosa propiedade personalizada CSS ou usa a variable Sass.

Usando SVG incorporado

A inclusión de SVG como URI de datos require que o URL escape algúns caracteres, sobre todo <, >e #. É por iso que a $breadcrumb-dividervariable pasa pola nosa escape-svg()función Sass . Ao usar a propiedade personalizada CSS, necesitas que o URL escape do teu SVG pola túa conta. Le as explicacións de Kevin Weber en CodePen para obter información detallada sobre o que escapar.

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>");

Tamén pode eliminar a configuración do divisor --bs-breadcrumb-divider: '';(as cadeas baleiras nas propiedades personalizadas CSS contan como un valor) ou establecer a variable Sass como $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;

Accesibilidade

Dado que as rutas de navegación proporcionan unha navegación, é unha boa idea engadir unha etiqueta significativa como aria-label="breadcrumb"para describir o tipo de navegación proporcionada no <nav>elemento, así como aplicar un aria-current="page"ao último elemento do conxunto para indicar que representa a páxina actual.

Para obter máis información, consulte o patrón de ruta de navegación da Guía de prácticas de creación de ARIA .

CSS

Variables

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, as migas de pan agora usan variables CSS locais activadas .breadcrumbpara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

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

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