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

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. बदलून ते बदलूं येतात $breadcrumb-divider. स्ट्रिंग भोंवतणी कोट्स तयार करपाक कोट> फंक्शन जाय, देखून तुमकां सेपरेटर म्हणून जाय जाल्यार, तुमी हें वापरूं येता:

$breadcrumb-divider: quote(">");

तशेंच base64 एम्बेडेड SVG चिन्न वापरप शक्य आसा :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

$breadcrumb-dividerसेट करून विभाजक काडून उडोवंक मेळटा none:

$breadcrumb-divider: none;

सुलभताय

aria-label="breadcrumb"ब्रेडक्रंब नेव्हिगेशन पुरवण करता देखून, घटकांत दिल्ल्या नेव्हिगेशन प्रकाराचें वर्णन करपा सारकें अर्थपूर्ण लेबल जोडप <nav>, तशेंच aria-current="page"सद्याच्या पानाचें प्रतिनिधित्व करता हें दाखोवपाक संचांतल्या निमाण्या वस्तूक एक लागू करप ही एक बरी कल्पना.

चड म्हायती खातीर, ब्रेडक्रंब नमुन्या खातीर WAI-ARIA लेखन पद्दती पळयात .