ברעאַדקרומב

אָנווייַזן דעם אָרט פון דעם בלאַט אין אַ נאַוויגאַציע כייעראַרקי וואָס אויטאָמאַטיש מוסיף סעפּערייטערז דורך 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-dividerSass בייַטעוודיק - און $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 קאַונץ ווי אַ ווערט), אָדער באַשטעטיקן די סאַסס בייַטעוודיק צו $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;