عناصر التنقّل Breadcrumb في إطار العمل Bootstrap

وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام CSS ويمكن من خلاله تصفّح محتوى الموقع.

نظرة عامّة

تُضاف الفواصل تلقائيًّا بين عناصر القائمة التفصيليّة بتنسيقات CSS عبر الخاصيّتين

‎::before و content.

<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>

سهولة الوصول Accessibility

بما أنّ عناصر التنقّل تخدُم التنقّل داخل الموقع فمن الجيّد إضافة لافتة Label مفيدة مثل ‎aria-label="breadcrumb"‎ لوصف نوعيّة قائمة التنقّل ضمن العنصُر <nav> إضافةً إلى تطبيق التنسيق aria-current="page"‎ على العنصُر الأخير من العناصر للإشارة إلى أنّه يمثّل الصفحة الحاليّة.

انظُر الممارسات المنصوح بها ضمن المعيار WAI-ARIA في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.

مصادر

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