عناصر التنقّل 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 في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.

مصادر

• صفحة Breadcrumb في توثيق Bootstrap.