انتقل إلى محتوى الدرس

Semantic Breadcrumb Markup البنية الدلالية لمسار التصفح

ابنِ مسارات تصفح Breadcrumbs دلالية ومتاحة في Bootstrap 5.3 باستخدام وسوم nav وol القياسية وتمييز الصفحة الحالية وتخصيص الفواصل بمتغيرات CSS وأيقونات SVG المدمجة ودعم العربية RTL.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تبدأ وحدة مكوّنات التنقل في Bootstrap 5.3 بمكوّن مسار التصفح Breadcrumbs الذي يوضّح للزائر موقعه الحالي ضمن الشجرة الهرمية للموقع (مثل: الرئيسية ثم المسارات التعليمية ثم درس مسار التصفح)، ويتيح له الصعود السريع لأي مستوى أبوي بنقرة واحدة، كما يعزّز فهم محركات البحث لبنية الروابط الداخلية.

لأن عناصر المسار تمتلك ترتيباً هرمياً متسلسلاً لا يصح خلطه، تشترط المعايير الدلالية وإرشادات WAI-ARIA استخدام قائمة مرتبة <ol class="breadcrumb"> مغلّفة داخل وسم تنقل مستقل <nav aria-label="breadcrumb">، بحيث لا تتداخل مع قائمة التنقل العلوية الرئيسية للموقع لدى مستخدمي قارئات الشاشة.

الصف 2 صورة توضيحية
مخطط الهيكل الدلالي لمسار التصفح nav وol.breadcrumb وعناصر breadcrumb-item
الصف 3 ملاحظة هامة