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