ब्रेडक्रम्ब
नेविगेशनल पदानुक्रम दे अंदर मौजूदा पृष्ठ दा स्थान दस्सो जेह् ड़ा स्वतः 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"
करना एह् दर्शांदा ऐ जे एह् मौजूदा पृष्ठ दा प्रतिनिधित्व करदा ऐ.
होर मती जानकारी आस्तै, एआरआईए लेखन प्रथाएं दी गाइड ब्रेडक्रंब पैटर्न दिक्खो .