Non bo'laklari
Joriy sahifaning joylashuvini CSS orqali avtomatik ravishda ajratuvchi qo'shadigan navigatsiya ierarxiyasida ko'rsating.
Misol
<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>
Ajratgichni o'zgartirish
::before
Separatorlar CSS-ga va orqali avtomatik ravishda qo'shiladi content
. Ularni o'zgartirish orqali o'zgartirish mumkin $breadcrumb-divider
. Kotirovka funktsiyasi satr atrofida tirnoqlarni yaratish uchun kerak, shuning uchun agar siz ajratuvchi sifatida xohlasangiz, buni ishlatishingiz mumkin :>
$breadcrumb-divider: quote(">");
Shuningdek, base64 o'rnatilgan SVG belgisidan foydalanish mumkin :
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
Ajratgichni o'rnatish orqali olib tashlash $breadcrumb-divider
mumkin none
:
$breadcrumb-divider: none;
Foydalanish imkoniyati
aria-label="breadcrumb"
Non parchalari navigatsiyani ta'minlaganligi sababli, elementda taqdim etilgan navigatsiya turini tavsiflash kabi mazmunli yorliqni qo'shish <nav>
, shuningdek aria-current="page"
, joriy sahifani ifodalash uchun to'plamning oxirgi elementiga belgi qo'yish yaxshi bo'ladi.
Qo'shimcha ma'lumot olish uchun ARIA Mualliflik Amaliyotlari Qo'llanmasiga qarang .