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.

Halimbawa

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

Pagpapalit ng separator

Awtomatikong idinaragdag ang mga separator sa CSS sa pamamagitan ng ::beforeat content. Maaari silang baguhin sa pamamagitan ng pagbabago $breadcrumb-divider. Ang quote function ay kailangan upang makabuo ng mga quote sa paligid ng isang string, kaya kung gusto mo >bilang separator, maaari mong gamitin ito:

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

Posible ring gumamit ng base64 na naka-embed na SVG icon :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

Maaaring alisin ang separator sa pamamagitan ng pagtatakda $breadcrumb-dividersa none:

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