تمييز الصفحة الحالية بالمسار | مسار التصفح Breadcrumbs في بوتستراب 5

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

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

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

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

الصف 2 كود برمجي

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>

جرّب بنفسك

الصف 3 ملاحظة هامة

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

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

جميع فقرات هذا الدرس (مسار التصفح Breadcrumbs في بوتستراب 5)