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

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 चड वापरात.

एम्बेडेड एसव्हीजी वापरप

डेटा URI म्हणून SVG इनलायन करपाक URL कांय अक्षरां सुटका करची पडटा, चड करून <, >आनी #. देखूनच आमच्या Sass फंक्शनांतल्यान$breadcrumb-divider व्हेरिएबल पास जाता . CSS सानुकूल गुणधर्म वापरतना, तुमकां तुमचो SVG स्वताच्या हातान URL पळून वचपाक जाय. कितें पळून वचचें हाचे विशीं सविस्तर म्हायती खातीर CodePen चेर केविन वेबराचीं स्पश्टीकरणां वाचात .escape-svg()

एचटीएमएल हें नांव

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

तुमी विभाजक मांडावळय काडून उडोवंक शकतात --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"सद्याच्या पानाचें प्रतिनिधित्व करता हें दाखोवपाक संचांतल्या निमाण्या वस्तूक एक लागू करप ही एक बरी कल्पना.

चड म्हायती खातीर, पळयात ARIA लेखन पद्दती मार्गदर्शक breadcrumb pattern .

सीएसएस हें नांव

चड-उणें

v5.2.0 त जोडलां

Bootstrap च्या विकसीत जावपी CSS चड-उणें पद्दतीचो एक भाग म्हूण, ब्रेडक्रंब आतां .breadcrumbवाडयल्ल्या रियल-टायम पसंतीखातीर थळाव्या CSS चड-उणें चालू वापरतात. CSS चयापचयांखातीर मोलां Sass वरवीं सेट केल्लीं आसात, देखून Sass पसंतीचें अजूनय समर्थीत आसा, तेंय.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

सॅस चड-उणें

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