ब्रेडक्रम्ब

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

इस पृष्ठ पर

उदाहरण

न्यूनतम स्टाइल वाला ब्रेडक्रंब बनाने के लिए लिंक की गई सूची आइटम के साथ ऑर्डर की गई या बिना क्रम वाली सूची का उपयोग करें। इच्छानुसार अतिरिक्त शैलियों को जोड़ने के लिए हमारी उपयोगिताओं का उपयोग करें।

<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। उन्हें स्थानीय CSS कस्टम प्रॉपर्टी को संशोधित करके --bs-breadcrumb-divider, या $breadcrumb-dividerSass चर के माध्यम से - और $breadcrumb-divider-flippedइसके RTL समकक्ष के लिए, यदि आवश्यक हो तो बदला जा सकता है। हम अपने Sass वेरिएबल के लिए डिफ़ॉल्ट हैं, जो कि कस्टम प्रॉपर्टी के फॉलबैक के रूप में सेट है। इस तरह, आपको एक वैश्विक विभक्त मिलता है जिसे आप किसी भी समय CSS को फिर से संकलित किए बिना ओवरराइड कर सकते हैं।

<nav style="--bs-breadcrumb-divider: '>';" 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>

Sass के माध्यम से संशोधित करते समय, एक स्ट्रिंग के चारों ओर उद्धरण उत्पन्न करने के लिए उद्धरण फ़ंक्शन की आवश्यकता होती है। उदाहरण के लिए, >विभक्त के रूप में उपयोग करके, आप इसका उपयोग कर सकते हैं:

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

एम्बेडेड एसवीजी आइकन का उपयोग करना भी संभव है । इसे हमारी CSS कस्टम प्रॉपर्टी के माध्यम से लागू करें, या Sass वेरिएबल का उपयोग करें।

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" 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>

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

आप डिवाइडर सेटिंग को भी हटा सकते हैं --bs-breadcrumb-divider: '';(सीएसएस कस्टम प्रॉपर्टी में रिक्त स्ट्रिंग्स को मान के रूप में गिना जाता है), या सैस वैरिएबल को पर सेट कर सकते हैं $breadcrumb-divider: none;।

<nav style="--bs-breadcrumb-divider: '';" 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>

$breadcrumb-divider: none;

सरल उपयोग

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

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

सास

चर

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;