انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 48
دورة بوتستراب 5

مسار التصفح Breadcrumbs في بوتستراب 5Bootstrap 5 Breadcrumbs

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

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

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

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

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

Active Current Page Item تمييز الصفحة الحالية بالمسار

كل مستوى أبوي في المسار يوضع داخل <li class="breadcrumb-item"> ويضم رابطاً حقيقياً <a href="..."> يقود لصفحة ذلك القسم. أمّا العنصر الأخير الذي يمثّل الصفحة المفتوحة حالياً فيُمنح الكلاس .active مع السمة الصوتية الإلزامية aria-current="page".

قاعدة هندسية مهمة لتجربة المستخدم وتحسين محركات البحث: اجعل نص العنصر الأخير النشط نصاً مقروءاً مباشراً دون وسم رابط ذاتي <a> يشير لنفس الصفحة، واحرص على كتابة اسم الصفحة الكامل بوضوح دون بتره بنقاط الحذف ....

HTML 
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Courses</a></li>
    <li class="breadcrumb-item active"
      aria-current="page">Bootstrap 5.3</li>
  </ol>
</nav>
جرّب بنفسك

Custom Character Dividers تخصيص رمز الفاصل بالمتغيرات

يعتمد Bootstrap 5 المتغير المحلي --bs-breadcrumb-divider لضبط شكل الفاصل بين مستويات المسار (وقيمته الافتراضية "/"). بفضل هذا التصميم العصري، يمكنك تغيير الرمز الفاصل إلى علامة أكبر من > أو سهم › أو شرطة، أو حتى إزالته تماماً بتمرير سلسلة فارغة '' عبر خاصية style على وسم <nav> دون كتابة قاعدة CSS خارجية واحدة!

مخطط تخصيص فواصل مسار التصفح بالمتغير --bs-breadcrumb-divider وأيقونات SVG المدمجة ودعم RTL
HTML 
<nav style="--bs-breadcrumb-divider: '>';"
  aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Docs</a></li>
    <li class="breadcrumb-item active"
      aria-current="page">Navigation</li>
  </ol>
</nav>
جرّب بنفسك

Embedded SVG Dividers فواصل أيقونات SVG المدمجة

لا يقتصر المتغير --bs-breadcrumb-divider على المحارف النصية فحسب؛ بل يقبل كذلك دالة url("data:image/svg+xml,...") لتضمين سهم فيكتوري حاد Chevron SVG يعمل فوراً دون انتظار تحميل ملفات خطوط خارجية، مع تلوينه برمز لوني مرشّح لروابط البيانات مثل %236c757d.

HTML 
<nav class="svg-crumb" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Store</a></li>
    <li class="breadcrumb-item active"
      aria-current="page">Hardware</li>
  </ol>
</nav>
جرّب بنفسك

RTL Breadcrumb Directions اتجاه مسار التصفح بالعربية

عند بناء واجهات عربية باتجاه dir="rtl" مع ملف bootstrap.rtl.min.css، ينعكس تدفق عناصر .breadcrumb المرنة تلقائياً ليبدأ المسار من أقصى اليمين بالصفحة الرئيسية ويتدرج نحو اليسار وصولاً للصفحة الحالية، كما تُضبط الحواشي المنطقية للفاصل عبر float: right وpadding-left داخل النسخة العربية الرسمية.

وانتبه لتفصيل بصري دقيق في الواجهات الثنائية اللغة: إذا استخدمت سهماً نصياً أو أيقونة Chevron SVG مخصصة بدلاً من الشرطة المائلة، وجّه رأس السهم لليمين › في الإنجليزية LTR، ووجّهه لليسار ‹ في العربية RTL حتى يتطابق اتجاه السهم مع اتجاه عين القارئ!

جدول مرجعي لبنية ومتغيرات مسار التصفح (Breadcrumbs Reference)

العنصر / المتغيرالدور الوظيفيملاحظة الإتاحة والعربية RTL
<nav aria-label="breadcrumb">المعلم الدلالي المحيط بالمساريميز المسار عن شريط التنقل الرئيسي لقارئ الشاشة
<ol class="breadcrumb">قائمة مرتبة لعناصر المسارتعكس التسلسل الأبوي الحقيقي لصفحات الموقع
.breadcrumb-item.activeتمييز عنصر الصفحة المفتوحة حالياًيُرفق بـ aria-current="page" بدون رابط ذاتي
--bs-breadcrumb-dividerتخصيص رمز أو أيقونة الفاصلاستخدم ‹ في العربية RTL و› في الإنجليزية LTR
--bs-breadcrumb-divider-colorتحديد لون الفاصليضمن تبايناً واضحاً في الوضعين الفاتح والداكن
HTML 
<nav style="--bs-breadcrumb-divider: '‹';"
  aria-label="breadcrumb" dir="rtl">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active"
      aria-current="page">Breadcrumbs</li>
  </ol>
</nav>
جرّب بنفسك
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت بناء مسارات التصفح الدلالية Breadcrumbs في Bootstrap 5.3 باستخدام nav وol، وتمييز الصفحة الحالية بـ aria-current="page"، وتخصيص الفواصل بالرموز النصية وأيقونات SVG المدمجة، وضبط الاتجاه العربي RTL. الخطوة التالية: انتقل الآن إلى الدرس التاسع والأربعين لإتقان شريط ترقيم الصفحات Pagination لتقسيم الجداول والقوائم الطويلة بأزرار متجاوبة ومتاحة.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 Breadcrumb Trail مسار التصفح (Breadcrumb)
شريط تنقل ثانوي يعرض التسلسل الأبوي للصفحة الحالية ويسهّل الرجوع لأي قسم أعلى بنقرة واحدة.
للمراجعة
02 Current Page Indicator مؤشر الصفحة الحالية
دمج الكلاس active مع السمة aria-current="page" على العنصر الأخير كنص غير رابط لتمييز الصفحة المفتوحة.
للمراجعة
03 CSS Custom Divider متغير الفاصل المخصص
المتغير المحلي --bs-breadcrumb-divider المسؤول عن تخصيص شكل الفاصل بين عناصر المسار أو إلغائه.
للمراجعة
04 Directional Chevron سهم الاتجاه المنطقي
مواءمة اتجاه سهم الفاصل مع حركة القراءة فيشير لليسار (‹) بالعربية ولليمين (›) بالإنجليزية.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 ARIA تطبيقات الإنترنت الغنية المتاحة
Accessible Rich Internet Applications
توفّر سمتَي aria-label="breadcrumb" وaria-current="page" لتعريف المسار بدقة لقارئات الشاشة.
للمراجعة
02 RTL من اليمين إلى اليسار
Right-to-Left
نمط الاتجاه من اليمين إلى اليسار المعتمد للواجهات العربية مع ملف bootstrap.rtl.min.css.
للمراجعة
03 SVG الرسوميات المتجهة القابلة للتحجيم
Scalable Vector Graphics
صيغة رسوميات متجهة حادة تُدمج مباشرةً داخل متغير الفاصل دون الحاجة لملفات أيقونات خارجية.
للمراجعة
04 SEO تحسين محركات البحث
Search Engine Optimization
ظهور الصفحات في محركات البحث الذي يتعزز بالروابط الأبوية الواضحة ومخططات المسار المنظمة.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/2مهام منجزة

  1. أنشئ عنصر nav بسمة aria-label="breadcrumb" وفاصل ">"، وبداخله قائمة ol.breadcrumb تضم رابطين أبويين وعنصراً أخيراً نشطاً يحمل aria-current="page".

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. اضبط اتجاه الصفحة على dir="rtl" مع ملف bootstrap.rtl.min.css واستخدم الفاصل "‹" ليتجه المسار بسلاسة من اليمين إلى اليسار.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

8أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي8 أسئلة تنتظرك
01

ما تركيبة عناصر HTML الدلالية القياسية لبناء مكوّن مسار التصفح Breadcrumb في Bootstrap 5؟

تعبّر القائمة المرتبة <ol> داخل معلم <nav> المسمّى عن الترتيب الأبوي المتسلسل بدقة لقارئات الشاشة.

02

كيف يضيف Bootstrap 5 رموز الفواصل (مثل "/") بين عناصر .breadcrumb-item؟

تُولَّد الفواصل تلقائياً في CSS بواسطة ::before اعتماداً على قيمة المتغير --bs-breadcrumb-divider.

03

أي سمة إتاحة يجب إضافتها للعنصر الأخير النشط (.breadcrumb-item.active) الذي يمثّل الصفحة الحالية؟

تُخبر السمة aria-current="page" التقنيات المساعدة أن هذا العنصر هو الصفحة المفتوحة حالياً.

04

يُفضّل جعل العنصر الأخير النشط في مسار التصفح نصاً مباشراً وليس رابطاً يشير إلى نفس الصفحة الحالية.

عدم تحويل اسم الصفحة الحالية إلى رابط ذاتي يمنع إعادة تحميل الصفحة بلا جدوى ويوضّح موضع الزائر.

05

كيف تزيل الفواصل تماماً من مسار التصفح في Bootstrap 5 دون كتابة ملف CSS خارجي؟

تعيين قيمة سلسلة نصية فارغة للمتغير --bs-breadcrumb-divider يزيل الفاصل المولّد بنظافة.

06

يدعم المتغير --bs-breadcrumb-divider تضمين أيقونات SVG فيكتورية مباشرةً عبر دالة url("data:image/svg+xml,...").

تعمل صيغة Data-URI لأيقونات SVG مباشرةً داخل المتغير لرسم أسهم فيكتورية حادة.

07

في الواجهة العربية ذات الاتجاه من اليمين لليسار (dir="rtl")، إلى أي جهة ينبغي أن يشير رأس سهم الفاصل؟

يبدأ المسار العربي من اليمين بالرئيسية ويتدرج يساراً نحو الصفحة الحالية، لذا يشير السهم لليسار (‹).

08

يتطلب إظهار مسار التصفح وفواصله في Bootstrap 5 تهيئة جافاسكريبت عبر باني new bootstrap.Breadcrumb(el).

مسار التصفح مكوّن دلالي وبصري يعتمد على HTML وCSS بالكامل ولا يتطلب أي إضافة جافاسكريبت.