బ్రెడ్ క్రంబ్

CSS ద్వారా స్వయంచాలకంగా సెపరేటర్‌లను జోడించే నావిగేషనల్ సోపానక్రమంలో ప్రస్తుత పేజీ స్థానాన్ని సూచించండి.

ఈ పేజీలో

ఉదాహరణ

కనిష్టంగా స్టైల్ చేయబడిన బ్రెడ్‌క్రంబ్‌ను సృష్టించడానికి లింక్ చేయబడిన జాబితా అంశాలతో ఆర్డర్ చేయబడిన లేదా క్రమం చేయని జాబితాను ఉపయోగించండి. కావలసిన విధంగా అదనపు శైలులను జోడించడానికి మా యుటిలిటీలను ఉపయోగించండి.

html

<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మరియు ద్వారా CSSలో డివైడర్లు స్వయంచాలకంగా జోడించబడతాయి content. --bs-breadcrumb-dividerస్థానిక CSS కస్టమ్ ప్రాపర్టీని సవరించడం ద్వారా లేదా $breadcrumb-dividerSass వేరియబుల్ ద్వారా వాటిని మార్చవచ్చు - మరియు $breadcrumb-divider-flippedఅవసరమైతే దాని RTL కౌంటర్ కోసం. కస్టమ్ ప్రాపర్టీకి ఫాల్‌బ్యాక్‌గా సెట్ చేయబడిన మా Sass వేరియబుల్‌కి మేము డిఫాల్ట్ చేస్తాము. ఈ విధంగా, మీరు ఎప్పుడైనా CSSని రీకంపైల్ చేయకుండా భర్తీ చేయగల గ్లోబల్ డివైడర్‌ను పొందుతారు.

html

<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 వేరియబుల్ ఉపయోగించండి.

పొందుపరిచిన SVGని ఉపయోగించడం

SVGని డేటా URIగా ఇన్‌లైన్ చేయడానికి URLకి కొన్ని అక్షరాలు తప్పించుకోవడం అవసరం, ముఖ్యంగా <, >మరియు #. అందుకే వేరియబుల్ మన సాస్ ఫంక్షన్$breadcrumb-divider ద్వారా పంపబడుతుంది . CSS అనుకూల ప్రాపర్టీని ఉపయోగిస్తున్నప్పుడు, మీరు మీ స్వంతంగా మీ SVG నుండి తప్పించుకోవడానికి URL అవసరం. ఏమి తప్పించుకోవాలనే దానిపై వివరణాత్మక సమాచారం కోసం కోడ్‌పెన్‌పై కెవిన్ వెబర్ వివరణలను చదవండి .escape-svg()

html

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

html

<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 ఆథరింగ్ ప్రాక్టీసెస్ గైడ్ బ్రెడ్‌క్రంబ్ నమూనాను చూడండి .

CSS

వేరియబుల్స్

v5.2.0లో జోడించబడింది

బూట్‌స్ట్రాప్ యొక్క అభివృద్ధి చెందుతున్న 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;