ब्रेडक्रंब हें नांव

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 व्हेरिएबलाक डिफॉल्ट करतात, जें सानुकूल गुणधर्माक फॉलबॅक म्हणून सेट केलां. अशे तरेन, तुमकां एक जागतीक विभाजक मेळटा जो तुमी खंयच्याय वेळार 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(">");

तशेंच एम्बेडेड SVG चिन्न वापरप शक्य आसा . आमच्या 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;