Breadcrumb

Ipahiwatig ang kasalukuyang lokasyon ng pahina sa loob ng isang hierarchy ng pag-navigate na awtomatikong nagdaragdag ng mga separator sa pamamagitan ng CSS.

Sa pahinang ito

Halimbawa

Gumamit ng nakaayos o hindi nakaayos na listahan na may mga naka-link na item sa listahan upang lumikha ng isang maliit na istilong breadcrumb. Gamitin ang aming mga utility upang magdagdag ng mga karagdagang istilo ayon sa gusto.

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>

Mga divider

Ang mga divider ay awtomatikong idinaragdag sa CSS sa pamamagitan ng ::beforeat content. Maaaring baguhin ang mga ito sa pamamagitan ng pagbabago ng lokal na CSS custom na property --bs-breadcrumb-divider, o sa pamamagitan ng $breadcrumb-dividerSass variable — at $breadcrumb-divider-flippedpara sa RTL counterpart nito, kung kinakailangan. Default namin ang aming Sass variable, na nakatakda bilang fallback sa custom na property. Sa ganitong paraan, makakakuha ka ng pandaigdigang divider na maaari mong i-override nang hindi muling kino-compile ang CSS anumang oras.

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>

Kapag binago sa pamamagitan ng Sass, ang quote function ay kinakailangan upang bumuo ng mga quote sa paligid ng isang string. Halimbawa, gamit >bilang divider, maaari mong gamitin ito:

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

Posible ring gumamit ng naka- embed na SVG icon . Ilapat ito sa pamamagitan ng aming custom na property ng CSS, o gamitin ang Sass variable.

Gamit ang naka-embed na SVG

Ang pag-inlining sa SVG bilang data URI ay nangangailangan ng URL na makatakas sa ilang mga character, higit sa lahat <, >at #. Iyon ang dahilan kung bakit ang $breadcrumb-dividervariable ay ipinapasa sa aming escape-svg()Sass function . Kapag ginagamit ang custom na property ng CSS, kailangan mong i-URL ang iyong SVG nang mag-isa. Basahin ang mga paliwanag ni Kevin Weber sa CodePen para sa detalyadong impormasyon sa kung ano ang tatakasan.

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

Maaari mo ring alisin ang setting ng divider --bs-breadcrumb-divider: '';(mabibilang bilang value ang mga walang laman na string sa mga custom na property ng CSS), o itakda ang Sass variable sa $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;

Accessibility

Dahil nagbibigay ng nabigasyon ang mga breadcrumb, magandang ideya na magdagdag ng makabuluhang label gaya ng aria-label="breadcrumb"paglalarawan sa uri ng nabigasyon na ibinigay sa <nav>elemento, pati na rin ang paglalapat aria-current="page"ng sa huling item ng set upang isaad na kinakatawan nito ang kasalukuyang pahina.

Para sa higit pang impormasyon, tingnan ang pattern ng breadcrumb na Gabay sa Mga Kasanayan sa Pag-akda ng ARIA .

CSS

Mga variable

Idinagdag sa v5.2.0

Bilang bahagi ng umuusbong na mga variable ng CSS ng Bootstrap, ginagamit na ngayon ng mga breadcrumb ang mga lokal na variable ng CSS .breadcrumbpara sa pinahusay na real-time na pag-customize. Ang mga halaga para sa mga variable ng CSS ay itinakda sa pamamagitan ng Sass, kaya sinusuportahan pa rin ang pag-customize ng Sass.

  --#{$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 variable

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