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 ::before
leh 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-divider
ang 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.