Brout
Gitt d'Positioun vun der aktueller Säit an enger Navigatiounshierarchie un déi automatesch Separatoren iwwer CSS bäidréit.
Beispill
Benotzt eng bestallt oder net bestallt Lëscht mat verlinkte Lëschteartikele fir e minimal stylesch Broutkummer ze kreéieren. Benotzt eis Utilities fir zousätzlech Stiler ze addéieren wéi Dir wëllt.
<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>
Dividers
Dividers ginn automatesch an CSS dobäigesat duerch ::before
an content
. Si kënne geännert ginn andeems Dir eng lokal CSS Custom Property ännert --bs-breadcrumb-divider
, oder duerch d' $breadcrumb-divider
Sass Variabel - a $breadcrumb-divider-flipped
fir seng RTL Géigespiller, wann néideg. Mir Standard op eis Sass Variabel, déi als Réckfall op déi personaliséiert Eegeschafte gesat gëtt. Op dës Manéier kritt Dir e globalen Divider deen Dir kënnt iwwerschreiden ouni CSS zu all Moment ze kompiléieren.
<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>
Wann Dir iwwer Sass ännert, ass d' Zitatfunktioun erfuerderlech fir d'Zitater ronderëm eng String ze generéieren. Zum Beispill, benotzt >
als Divider, kënnt Dir dëst benotzen:
$breadcrumb-divider: quote(">");
Et ass och méiglech eng embedded SVG Ikon ze benotzen . Benotzt et iwwer eis CSS Custom Property, oder benotzt d'Sass Variabel.
<nav style="--bs-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");" 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");
Dir kënnt och d'Divisiounsastellung ewechhuelen --bs-breadcrumb-divider: '';
(eidel Strings an CSS Custom Properties zielen als Wäert), oder d'Sass Variabel op setzen $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;
Accessibilitéit
Zënter Broutkrummelen eng Navigatioun ubidden, ass et eng gutt Iddi fir e sënnvoll Label ze addéieren, sou wéi aria-label="breadcrumb"
d'Aart vun der Navigatioun, déi am <nav>
Element geliwwert gëtt, ze beschreiwen, wéi och en aria-current="page"
op de leschten Element vum Set applizéiert fir unzeweisen datt et déi aktuell Säit duerstellt.
Fir méi Informatioun, kuckt d' WAI-ARIA Authoring Practices fir de Breadcrumb Muster .
Sass
Variablen
$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;