Strouhanka

Označte umístění aktuální stránky v rámci navigační hierarchie, která automaticky přidává oddělovače pomocí CSS.

Na této straně

Příklad

Použijte uspořádaný nebo neuspořádaný seznam s propojenými položkami seznamu k vytvoření minimálně stylizované strouhanky. Použijte naše nástroje k přidání dalších stylů podle potřeby.

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

Děliče

Oddělovače se do CSS přidávají automaticky prostřednictvím ::beforea content. Lze je změnit úpravou místní vlastní vlastnosti CSS --bs-breadcrumb-dividernebo prostřednictvím $breadcrumb-dividerproměnné Sass – a $breadcrumb-divider-flippedv případě potřeby pro její protějšek RTL. Výchozí proměnnou Sass, která je nastavena jako záložní pro vlastní vlastnost. Tímto způsobem získáte globální oddělovač, který můžete přepsat, aniž byste museli kdykoli znovu kompilovat CSS.

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

Při úpravách přes Sass je vyžadována funkce uvozovek pro generování uvozovek kolem řetězce. Například při použití >jako oddělovač můžete použít toto:

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

Je také možné použít vnořenou ikonu SVG . Použijte jej prostřednictvím naší vlastní vlastnosti CSS nebo použijte proměnnou 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");

Můžete také odstranit nastavení oddělovače --bs-breadcrumb-divider: '';(prázdné řetězce ve vlastních vlastnostech CSS se počítají jako hodnota) nebo nastavit proměnnou Sass na $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;

Přístupnost

Vzhledem k tomu, že navigaci poskytují drobky, je vhodné přidat smysluplný štítek, aria-label="breadcrumb"který popisuje typ navigace v <nav>prvku, a také použít aria-current="page"na poslední položku sady a označit, že představuje aktuální stránku.

Další informace najdete ve WAI-ARIA Authoring Practices pro vzor drobečkové navigace .

Sass

Proměnné

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