ब्रेडक्रम्ब

नेविगेशनल पदानुक्रम दे अंदर मौजूदा पृष्ठ दा स्थान दस्सो जेह् ड़ा स्वतः 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. उनेंगी इक लोकल 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 चर दा इस्तेमाल करो.

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

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

एचटीएमएल ऐ

<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: '';(CSS कस्टम गुणें च खाली स्ट्रिंग्स इक मूल्य दे रूप च गिने जंदे न), जां Sass चर गी $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"करना एह् दर्शांदा ऐ जे एह् मौजूदा पृष्ठ दा प्रतिनिधित्व करदा ऐ.

होर मती जानकारी आस्तै, एआरआईए लेखन प्रथाएं दी गाइड ब्रेडक्रंब पैटर्न दिक्खो .

सीएसएस दा

चर करने वाले

v5.2.0 च जोड़ेआ गेआ

बूटस्ट्रैप दे विकसित CSS चर दृष्टिकोण दे हिस्से दे रूप च, ब्रेडक्रंब हून .breadcrumbबधाए गेदे रियल-टाइम अनुकूलन आस्तै लोकल CSS चर पर इस्तेमाल करदे न। 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;