Brauðmola

Tilgreindu staðsetningu núverandi síðu innan leiðsagnarstigveldis sem bætir sjálfkrafa við skiljum í gegnum CSS.

Á þessari síðu

Dæmi

Notaðu pantaðan eða óraðaðan lista með tengdum listaatriðum til að búa til lágkúrulaga brauðmola. Notaðu tólin okkar til að bæta við fleiri stílum eins og þú vilt.

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>

Deilendur

Skilum er sjálfkrafa bætt við í CSS í gegnum ::beforeog content. Þeim er hægt að breyta með því að breyta staðbundinni CSS sérsniðnum eiginleikum --bs-breadcrumb-divider, eða í gegnum $breadcrumb-dividerSass breytuna - og $breadcrumb-divider-flippedfyrir RTL hliðstæðu hennar, ef þörf krefur. Við notum sjálfgefið Sass breytuna okkar, sem er stillt sem varahlutur í sérsniðna eiginleikann. Þannig færðu alþjóðlegt deilikerfi sem þú getur hnekkt án þess að setja saman CSS aftur hvenær sem er.

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>

Þegar breytt er í gegnum Sass er tilvitnunaraðgerðin nauðsynleg til að búa til gæsalappirnar í kringum streng. Til dæmis, með því að nota >sem deili, geturðu notað þetta:

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

Það er líka hægt að nota innfellt SVG tákn . Notaðu það í gegnum CSS sérsniðna eiginleika okkar, eða notaðu Sass breytuna.

Notar innbyggt SVG

Innbygging SVG sem gagna-URI þarf til að vefslóð sleppur nokkrum stöfum, einkum <, >og #. Þess vegna er $breadcrumb-dividerbreytan send í gegnum escape-svg()Sass fallið okkar . Þegar þú notar CSS sérsniðna eiginleikann þarftu að sleppa vefslóð SVG þinni á eigin spýtur. Lestu útskýringar Kevin Weber á CodePen fyrir nákvæmar upplýsingar um hvað á að flýja.

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>");

Þú getur líka fjarlægt deilistillinguna --bs-breadcrumb-divider: '';(tómir strengir í CSS sérsniðnum eiginleikum teljast sem gildi), eða stilla Sass breytuna á $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;

Aðgengi

Þar sem brauðmolar veita leiðsögn er góð hugmynd að bæta við þýðingarmiklum merkimiða eins og aria-label="breadcrumb"til að lýsa tegund leiðsagnar sem er í <nav>þættinum, ásamt því að nota aria-current="page"á síðasta atriði settsins til að gefa til kynna að það tákni núverandi síðu.

Fyrir frekari upplýsingar, sjá ARIA höfundarvenjur leiðarvísir breadcrumb pattern .

CSS

Breytur

Bætt við í v5.2.0

Sem hluti af CSS breytum í þróun Bootstrap, nota breadcrumbs nú staðbundnar CSS breytur á .breadcrumbtil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

  --#{$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};

Sass breytur

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