Pen

Endike kote paj aktyèl la nan yon yerachi navigasyon ki otomatikman ajoute separatè atravè CSS.

Nan paj sa a

Egzanp

Sèvi ak yon lis òdone oswa ki pa kòmande ak atik lis ki lye yo pou kreye yon ti kal pen. Sèvi ak sèvis piblik nou yo pou ajoute estil adisyonèl jan ou vle.

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

Divizeur

Divizyon yo otomatikman ajoute nan CSS atravè ::beforeak content. Yo ka chanje lè w modifye yon pwopriyete lokal CSS koutim --bs-breadcrumb-divider, oswa atravè $breadcrumb-dividervaryab Sass la - ak $breadcrumb-divider-flippedpou kontrepati RTL li yo, si sa nesesè. Nou default nan varyab Sass nou an, ki mete kòm yon sekou nan pwopriyete a koutim. Nan fason sa a, ou jwenn yon divizyon mondyal ke ou ka pase sou plas san yo pa recompiling CSS nenpòt ki lè.

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

Lè modifye atravè Sass, fonksyon quote yo oblije jenere quotes alantou yon fisèl. Pou egzanp, lè l sèvi avèk >kòm divize an, ou ka itilize sa a:

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

Li posib tou pou itilize yon ikòn SVG entegre . Aplike li atravè pwopriyete koutim CSS nou an, oswa itilize varyab Sass la.

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

Ou kapab tou retire anviwònman divize an --bs-breadcrumb-divider: '';(fisèl vid nan pwopriyete koutim CSS konte kòm yon valè), oswa mete varyab Sass la sou $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;

Aksesiblite

Piske breadcrumbs bay yon navigasyon, li se yon bon lide pou ajoute yon etikèt ki gen sans tankou aria-label="breadcrumb"pou dekri kalite navigasyon yo bay nan <nav>eleman an, osi byen ke aplike yon aria-current="page"pou dènye atik nan ansanm pou endike ke li reprezante paj aktyèl la.

Pou plis enfòmasyon, gade WAI-ARIA Authoring Practices pou modèl breadcrumb la .

Sass

Varyab

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