عناصر التنقّل Breadcrumb في إطار العمل Bootstrap
وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام CSS ويمكن من خلاله تصفّح محتوى الموقع.
أمثلة
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">الرئيسيّة</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسيّة</a></li>
<li class="breadcrumb-item active" aria-current="page">المكتبة</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">الرئيسيّة</a></li>
<li class="breadcrumb-item"><a href="#">المكتبة</a></li>
<li class="breadcrumb-item active" aria-current="page">البيانات</li>
</ol>
</nav>
تغيير الفواصل
تُضاف الفواصل تلقائيًّا بين عناصر القائمة التفصيليّة بتنسيقات CSS عبر الخاصيّتين ::before و content. يمكن تغييرها عبر تغيير قيمة $breadcrumb-divider. الدالة quote ضرورية هنا لتوليد الاقتباسات حول السلاسل النصية، يمكنك استخدام المحرف < كفاصل على النحو التالي:
$breadcrumb-divider: quote(">");
يمكنك أيضا استعمال أيقونات SVG مضمنة من النوع base64.
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);
يمكنك إزالة الفاصل عبر تعيين قيمة $breadcrumb-divider إلى none.
سهولة الوصول Accessibility
بما أنّ عناصر التنقّل تخدُم التنقّل داخل الموقع فمن الجيّد إضافة لافتة (label) مفيدة مثل aria-label="breadcrumb" لوصف نوعيّة قائمة التنقّل ضمن العنصُر <nav> إضافةً إلى تطبيق التنسيق aria-current="page" على العنصُر الأخير من القائمة للإشارة إلى أنّه يمثّل الصفحة الحاليّة.
انظُر الممارسات المنصوح بها ضمن المعيار WAI-ARIA في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.