مسار التصفح (Breadcrumb)

مثال

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

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

الفواصل (Dividers)

يتم إضافة الفواصل تلقائياً في الـ CSS من خلال ::before و content. ويمكن تغييرها عن طريق تعديل خاصية CSS مخصصة محلية --bs-breadcrumb-divider، أو من خلال متغير Sass $breadcrumb-divider و $breadcrumb-divider-flipped للمقابل الخاص بها في الـ RTL، إذا لزم الأمر. نحن نعتمد افتراضياً على متغير Sass الخاص بنا، والذي يتم تعيينه كقيمة احتياطية (fallback) للخاصية المخصصة. بهذه الطريقة، تحصل على فاصل عام يمكنك تجاوزه دون الحاجة إلى إعادة تجميع الـ 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، فإن الدالة (function) quote مطلوبة لإنشاء علامات الاقتباس حول السلسلة النصية. على سبيل المثال، باستخدام > كفاصل، يمكنك استخدام هذا:

$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='%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;

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

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

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

الـ (CSS)

المتغيرات (Variables)

كجزء من نهج متغيرات CSS المتطور في الـ Bootstrap، تستخدم مسارات التصفح (Breadcrumb) الآن متغيرات 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};

متغيرات الـ (Sass)

$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:          var(--#{$prefix}secondary-color);
$breadcrumb-active-color:           var(--#{$prefix}secondary-color);
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;