مسار التنقل

حدد موقع الصفحة الحالية داخل التسلسل الهرمي للتنقل الذي يضيف فواصل تلقائيًا عبر CSS.

على هذه الصفحة

مثال

استخدم قائمة مرتبة أو غير مرتبة مع عناصر قائمة مرتبطة لإنشاء مسار تنقل ذي نمط بسيط. استخدم أدواتنا المساعدة لإضافة أنماط إضافية حسب الرغبة.

لغة البرمجة

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

المقسمات

تتم إضافة المقسمات تلقائيًا في CSS من خلال ::beforeو content. يمكن تغييرها عن طريق تعديل خاصية مخصصة CSS محلية --bs-breadcrumb-divider، أو من خلال $breadcrumb-dividerمتغير Sass - $breadcrumb-divider-flippedونظيرتها من اليمين إلى اليسار ، إذا لزم الأمر. نحن افتراضيًا إلى متغير Sass ، والذي تم تعيينه كعنصر احتياطي للخاصية المخصصة. بهذه الطريقة ، تحصل على مقسم عام يمكنك تجاوزه دون إعادة تجميع CSS في أي وقت.

لغة البرمجة

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

عند التعديل عبر Sass ، تكون وظيفة الاقتباس مطلوبة لإنشاء علامات الاقتباس حول سلسلة. على سبيل المثال ، باستخدام >الفاصل ، يمكنك استخدام هذا:

$breadcrumb-divider: quote(">");

من الممكن أيضًا استخدام رمز SVG مضمن . قم بتطبيقه عبر خاصية CSS المخصصة الخاصة بنا ، أو استخدم متغير Sass.

استخدام SVG المضمّن

يتطلب تضمين SVG كمعرّف URI للبيانات أن يتخطى عنوان URL عددًا قليلاً من الأحرف ، وعلى الأخص <، >و #. لهذا السبب $breadcrumb-dividerيتم تمرير المتغير عبر escape-svg()دالة Sass الخاصة بنا . عند استخدام خاصية CSS المخصصة ، تحتاج إلى إلغاء عنوان URL الخاص بك من SVG بنفسك. اقرأ تفسيرات كيفن ويبر على CodePen للحصول على معلومات مفصلة حول ما يجب الهروب منه.

لغة البرمجة

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

يمكنك أيضًا إزالة إعداد الحاجز --bs-breadcrumb-divider: '';(يتم احتساب السلاسل الفارغة في خصائص CSS المخصصة كقيمة) ، أو تعيين متغير Sass على $breadcrumb-divider: none;.

لغة البرمجة

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

$breadcrumb-divider: none;

إمكانية الوصول

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

لمزيد من المعلومات ، راجع نمط مسار التنقل لدليل ممارسات التأليف من ARIA .

CSS

المتغيرات

تمت الإضافة في الإصدار 5.2.0

كجزء من نهج متغيرات CSS المتطور في Bootstrap ، تستخدم مسارات التنقل الآن متغيرات CSS المحلية .breadcrumbلتحسين التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass ، لذلك لا يزال تخصيص Sass مدعومًا أيضًا.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

متغيرات ساس

$breadcrumb-font-size:              null;
$breadcrumb-padding-y:              0;
$breadcrumb-padding-x:              0;
$breadcrumb-item-padding-x:         .5rem;
$breadcrumb-margin-bottom:          1rem;
$breadcrumb-bg:                     null;
$breadcrumb-divider-color:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;