O falaoamata
Fa'ailoa le tulaga o le itulau o lo'o i ai nei i totonu o se fa'atonuga fa'ata'ita'iga e otometi lava ona fa'aopoopoina seseparators e ala i le CSS.
Faataitaiga
Fa'aoga se lisi fa'atonu pe le fa'atonuina fa'atasi ai ma mea lisi feso'ota'i e fai ai se si'i falaoa la'ititi. Fa'aoga a matou mea faigaluega e fa'aopoopo ai sitaili fa'aopoopo pe a mana'omia.
<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>
Vaevaega
E otometi lava ona fa'aopoopoina vaeluaga ile CSS e ala ile ::before
ma content
. E mafai ona suia i latou e ala i le suia o se fanua fa'ale-aganu'u CSS --bs-breadcrumb-divider
, pe ala i le $breadcrumb-divider
fesuiaiga Sass - ma $breadcrumb-divider-flipped
mo lana paaga RTL, pe a mana'omia. Matou te le faʻaogaina la matou fesuiaiga Sass, lea e faʻatulagaina e fai ma faʻafoʻi i le meatotino masani. I lenei auala, e te maua ai se vaeluaga o le lalolagi e mafai ona e faʻaogaina e aunoa ma le toe faʻapipiʻiina o le CSS i soo se taimi.
<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>
Pe a suia e ala i Sass, o le upusii galuega e manaʻomia e faʻatupu ai upusii faataamilo i se manoa. Mo se faʻataʻitaʻiga, faʻaaoga e >
fai ma vaeluaga, e mafai ona e faʻaogaina lenei:
$breadcrumb-divider: quote(">");
E mafai fo'i ona fa'aoga se fa'ailoga SVG fa'apipi'i . Fa'aoga e ala i le matou CSS meatotino tu'ufa'atasi, pe fa'aoga le fesuiaiga Sass.
<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");
E mafai fo'i ona e 'ave'esea le fa'asologa o le vaeluaga --bs-breadcrumb-divider: '';
(o manoa gaogao i totonu o meatotino aganu'u CSS e taulia o se tau), po'o le fa'atulagaina o le suiga Sass i le $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;
Avanoa
Talu ai ona o le falaoa e maua ai se folauga, o se manatu lelei le faʻaopoopoina o se igoa anoa e pei o aria-label="breadcrumb"
le faʻamatalaina o le ituaiga o faʻataʻitaʻiga o loʻo tuʻuina atu i le <nav>
elemene, faʻapea foʻi ma le faʻaogaina aria-current="page"
i le mea mulimuli o le seti e faʻaalia ai o loʻo faʻatusalia le itulau o loʻo iai nei.
Mo nisi fa'amatalaga, va'ai i le WAI-ARIA Authoring Practices mo le mamanu o le falaoa .
Sass
Fuafuaga
$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;