Panpeceto

Indiku la lokon de la aktuala paĝo ene de navigacia hierarkio, kiu aŭtomate aldonas apartigilojn per CSS.

Sur ĉi tiu paĝo

Ekzemplo

Uzu ordigitan aŭ neordigitan liston kun ligitaj listeroj por krei minimume stilitan pano. Uzu niajn ilojn por aldoni pliajn stilojn laŭdezire.

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

Dividiloj

Disigiloj estas aŭtomate aldonitaj en CSS per ::beforekaj content. Ili povas esti ŝanĝitaj modifante lokan CSS kutiman posedaĵon --bs-breadcrumb-divider, aŭ per la $breadcrumb-dividerSass-variablo - kaj $breadcrumb-divider-flippedpor ĝia RTL-ekvivalento, se necese. Ni defaŭlte al nia Sass-variablo, kiu estas agordita kiel rezerva al la kutima posedaĵo. Tiel vi ricevas tutmondan disigilon, kiun vi povas superregi sen rekompili CSS iam ajn.

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

Kiam vi modifas per Sass, la citaĵofunkcio estas postulata por generi la citaĵojn ĉirkaŭ ĉeno. Ekzemple, uzante >kiel la disigilon, vi povas uzi ĉi tion:

$breadcrumb-divider: quote(">");

Ankaŭ eblas uzi enigitan SVG-ikonon . Apliku ĝin per nia propra propraĵo CSS, aŭ uzu la variablon 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");

Vi ankaŭ povas forigi la disigilon --bs-breadcrumb-divider: '';(malplenaj ŝnuroj en CSS kutimaj propraĵoj kalkulas kiel valoro), aŭ agordi la Sass-variablon al $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;

Alirebleco

Ĉar panpecetoj disponigas navigadon, estas bona ideo aldoni signifan etikedon kiel ekzemple aria-label="breadcrumb"priskribi la specon de navigado disponigita en la <nav>elemento, same kiel apliki aria-current="page"al la lasta ero de la aro por indiki ke ĝi reprezentas la nunan paĝon.

Por pliaj informoj, vidu la Praktikojn de Aŭtorado de WAI-ARIA por la paneto-ŝablono .

Sass

Variabloj

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