ब्रेडक्रम्ब

एकटा नेविगेशनल पदानुक्रम के भीतर वर्तमान पृष्ठ के स्थान के संकेत करू जे स्वचालित रूप सं 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>

विभाजक

विभाजक स्वचालित रूप स CSS मे ::beforeआ content. ओकरा एकटा स्थानीय CSS कस्टम गुण कें संशोधित करय सं बदलल जा सकय छै --bs-breadcrumb-divider, या $breadcrumb-dividerSass चर कें माध्यम सं — आ $breadcrumb-divider-flippedओकर RTL समकक्ष कें लेल, यदि जरूरत होय. हम अपनऽ Sass चर क॑ डिफ़ॉल्ट रूप स॑ देखै छियै, जे कस्टम प्रॉपर्टी म॑ फॉलबैक के रूप म॑ सेट करलऽ गेलऽ छै । एहि तरहें, अहां कें एकटा ग्लोबल डिवाइडर मिलतय जेकरा अहां कोनों समय सीएसएस कें बिना पुनः संकलित केने ओवरराइड कयर सकय छी.

<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: '';(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"

अधिक जानकारी कें लेल, ब्रेडक्रंब पैटर्न कें लेल 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;