Chhangphut hnawih

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

Entirna

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

Separator thlak danglam a ni

CSS ah hian separator te chu automatic in ::beforeleh content. Anni chu tihdanglam theih a ni $breadcrumb-divider. String chhehvel quote siam nan quote> function hi a ngai a, chuvangin separator atan i duh chuan hetiang hian i hmang thei ang:

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

Base64 embedded SVG icon pawh hman theih a ni :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

Separator chu hetiang hian dahin a chhuak thei $breadcrumb-dividerang none:

$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 ARIA Authoring Practices Guide breadcrumb pattern ah hian en theih a ni.