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 ::before
at 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-divider
sa 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 pattern ng breadcrumb na Gabay sa Mga Kasanayan sa Pag-akda ng ARIA .