Migalhas de pão

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='%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>");

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 o padrão de trilha de navegação do ARIA Authoring Practices Guide .

CSS

Variáveis

Como parte da abordagem de variáveis ​​CSS em evolução do Bootstrap, os breadcrumbs agora usam variáveis ​​CSS locais .breadcrumbpara personalização aprimorada em tempo real. Os valores das variáveis ​​CSS são definidos por meio do Sass, portanto, a personalização do Sass também é suportada.

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

Variáveis ​​atrevidas

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