ब्रेडक्रंब के बा

वर्तमान पन्ना के स्थान के एगो नेविगेशनल हायरर्की के भीतर बताईं जे 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;