ब्रेडक्रम्ब

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

इस पृष्ठ पर

उदाहरण

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

एचटीएमएल

<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 वेरिएबल का उपयोग करें।

एम्बेडेड एसवीजी का उपयोग करना

एसवीजी को डेटा यूआरआई के रूप में इनलाइन करने के लिए यूआरएल को कुछ वर्णों से बचने की आवश्यकता होती है, विशेष रूप से <, >और #। इसलिए $breadcrumb-dividerवेरिएबल को हमारे escape-svg()Sass फंक्शन से गुजारा जाता है । CSS कस्टम प्रॉपर्टी का उपयोग करते समय, आपको स्वयं अपने SVG से बचने के लिए URL की आवश्यकता होती है। बचने के लिए विस्तृत जानकारी के लिए कोडपेन पर केविन वेबर के स्पष्टीकरण पढ़ें ।

एचटीएमएल

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

आप डिवाइडर सेटिंग को भी हटा सकते हैं --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"

अधिक जानकारी के लिए, ARIA ऑथरिंग प्रैक्टिस गाइड ब्रेडक्रंब पैटर्न देखें ।

सीएसएस

चर

v5.2.0 . में जोड़ा गया

बूटस्ट्रैप के विकसित हो रहे सीएसएस चर दृष्टिकोण के हिस्से के रूप में, ब्रेडक्रंब अब .breadcrumbउन्नत रीयल-टाइम अनुकूलन के लिए स्थानीय सीएसएस चर का उपयोग करते हैं। CSS वेरिएबल्स के मान Sass के माध्यम से सेट किए जाते हैं, इसलिए Sass अनुकूलन अभी भी समर्थित है।

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

सास चर

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