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

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

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

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

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

<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 WAI-ARIA Authoring Practices para sa pattern ng breadcrumb .

Sass

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