פירורי לחם

ציין את מיקום הדף הנוכחי בתוך היררכיית ניווט שמוסיפה אוטומטית מפרידים באמצעות 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ועבור מקבילו ל-RTL, במידת הצורך. ברירת המחדל היא משתנה 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;