in English

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.

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

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

<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='currentColor'/%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,%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='currentColor'/%3E%3C/svg%3E");

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

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 as prácticas de creación de WAI-ARIA para o patrón de ruta de navegación .

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;