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.

Pangkalahatang-ideya

Awtomatikong idinaragdag ang mga separator sa CSS sa pamamagitan ng ::beforeat content.

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

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 .