Migalhas de pão

Indique a localização da página atual dentro de uma hierarquia de navegação que adiciona automaticamente separadores via CSS.

Nesta página

Exemplo

Use uma lista ordenada ou não ordenada com itens de lista vinculados para criar uma trilha de pão com estilo mínimo. Use nossos utilitários para adicionar estilos adicionais conforme desejado.

<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

Divisores são adicionados automaticamente em CSS por meio de ::beforee content. Eles podem ser alterados modificando uma propriedade customizada CSS local --bs-breadcrumb-dividerou por meio da $breadcrumb-dividervariável Sass — e $breadcrumb-divider-flippedpor sua contraparte RTL, se necessário. O padrão é nossa variável Sass, que é definida como um fallback para a propriedade customizada. Dessa forma, você obtém um divisor global que pode substituir sem recompilar o CSS a qualquer 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>

Ao modificar via Sass, a função quote é necessária para gerar as cotações em torno de uma string. Por exemplo, usando >como divisor, você pode usar isso:

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

Também é possível usar um ícone SVG incorporado . Aplique-o por meio de nossa propriedade personalizada CSS ou use a variável 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");

Você também pode remover a configuração do divisor --bs-breadcrumb-divider: '';(strings vazias nas propriedades personalizadas CSS contam como um valor) ou definir a variável 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;

Acessibilidade

Como as trilhas de navegação fornecem uma navegação, é uma boa ideia adicionar um rótulo significativo, como aria-label="breadcrumb"para descrever o tipo de navegação fornecido no <nav>elemento, bem como aplicar um aria-current="page"ao último item do conjunto para indicar que ele representa a página atual.

Para obter mais informações, consulte as Práticas de autoria WAI-ARIA para o padrão de trilha de navegação .

Sass

Variáveis

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