مسار التنقل

حدد موقع الصفحة الحالية داخل التسلسل الهرمي للتنقل الذي يضيف فواصل تلقائيًا عبر 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.

<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='currentColor'/%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,%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='currentColor'/%3E%3C/svg%3E");

يمكنك أيضًا إزالة إعداد الحاجز --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"على العنصر الأخير من المجموعة للإشارة إلى أنه يمثل الصفحة الحالية.

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

ساس

المتغيرات

$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;