ब्रेडक्रम्ब

नेविगेशनल पदानुक्रम दे अंदर मौजूदा पृष्ठ दा स्थान दस्सो जेह् ड़ा स्वतः CSS दे राहें विभाजक जोड़दा ऐ।

मसाल

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

इक base64 एम्बेडेड SVG आइकन दा इस्तेमाल करना बी संभव ऐ :

$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 लेखन प्रथाएं गी दिक्खो .