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

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>

డివైడర్లు

::beforeమరియు ద్వారా CSSలో డివైడర్లు స్వయంచాలకంగా జోడించబడతాయి content. --bs-breadcrumb-dividerస్థానిక CSS కస్టమ్ ప్రాపర్టీని సవరించడం ద్వారా లేదా $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;