عناصر التنقّل Breadcrumb في إطار العمل Bootstrap
< Bootstrap
اذهب إلى التنقل
اذهب إلى البحث
مراجعة 13:18، 7 مايو 2018 بواسطة عبد اللطيف ايمش (نقاش | مساهمات) (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
وضِّح موقع الصفحة الحاليّة ضمن تسلسل هرميّ تُضاف إليه تلقائيًّا فواصل باستخدام 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 في ما يتعلّق بعناصر التنقّل للمزيد من التفاصيل.