ब्रेडक्रम्ब

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

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