ब्रेडक्रम्ब

एक नेविगेशनल पदानुक्रम के भीतर वर्तमान पृष्ठ का स्थान इंगित करें जो स्वचालित रूप से सीएसएस के माध्यम से विभाजक जोड़ता है।

उदाहरण

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

विभाजक बदलना

::beforeसीएसएस में और के माध्यम से विभाजक स्वचालित रूप से जोड़े जाते हैं content। इन्हें बदलकर बदला जा सकता है $breadcrumb-divider। एक स्ट्रिंग के चारों ओर उद्धरण उत्पन्न करने के लिए उद्धरण फ़ंक्शन की आवश्यकता होती है, इसलिए यदि आप सेपरेटर के रूप में चाहते हैं , तो> आप इसका उपयोग कर सकते हैं:

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

बेस 64 एम्बेडेड एसवीजी आइकन का उपयोग करना भी संभव है :

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

विभाजक को निम्न पर सेट करके हटाया जा सकता $breadcrumb-dividerहै none:

$breadcrumb-divider: none;

सरल उपयोग

चूंकि ब्रेडक्रंब एक नेविगेशन प्रदान करते हैं, इसलिए एक सार्थक लेबल जोड़ना एक अच्छा विचार है जैसे कि तत्व aria-label="breadcrumb"में प्रदान किए गए नेविगेशन के प्रकार का वर्णन करना , साथ ही सेट के अंतिम आइटम पर यह इंगित करने के लिए कि यह वर्तमान पृष्ठ का प्रतिनिधित्व करता है।<nav>aria-current="page"

अधिक जानकारी के लिए, ब्रेडक्रंब पैटर्न के लिए WAI-ARIA संलेखन अभ्यास देखें ।