Chhangphut hnawih

CSS hmanga separator automatic in a dah belh theihna navigational hierarchy chhungah tuna page awmna hmun chu tarlang rawh.

He page ah hian

Entirna

Ordered emaw unordered emaw list hmangin linked list items hmangin minimally styled breadcrumb siam rawh. Kan utilities hmangin duh angin style dang dah belh rawh.

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

Insem darhtute

Divider te chu CSS ah automatic in ::beforeleh content. Local CSS custom property siam danglamin an thlak thei a --bs-breadcrumb-divider, emaw $breadcrumb-dividerSass variable hmangin — leh $breadcrumb-divider-flippeda RTL counterpart tan pawh, a tul chuan. Kan Sass variable chu kan default a, chu chu custom property-a fallback angin kan set a ni. Chutiang chuan global divider i hmu a, chu chu engtik lai pawhin CSS recompiling ngai lovin i override thei ang.

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

Sass hmanga modify kan tih hian quote function hian string vel quote te chu a siam chhuak tur a ni. Entirnan, >as the divider hmangin, hetiang hian i hmang thei ang:

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

Embedded SVG icon pawh hman theih a ni bawk . Kan CSS custom property hmangin apply la, a nih loh leh Sass variable hmang rawh.

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

Divider setting pawh i paih thei bawk --bs-breadcrumb-divider: '';(CSS custom properties-a string empty te chu value anga chhiar a ni), a nih loh leh Sass variable chu $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;

A thlen theihna tur

Breadcrumbs hian navigation a pe a, chuvangin element aria-label="breadcrumb"-a navigation pek chi hrang hrang sawifiahna ang chi label awmze nei tak dah belh a <nav>tha a, chubakah aria-current="page"set-a item hnuhnung berah an apply a, chu chuan tuna page awm mek a entîr tih a tilang bawk.

Hriat belh duh chuan WAI-ARIA Authoring Practices ah hian breadcrumb pattern en rawh .

Sass a ni

Variables te pawh a awm

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