Нан үгіндісі

Ағымдағы беттің орнын 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>

Бөлгіштер

::beforeБөлгіштер және арқылы CSS автоматты түрде қосылады 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 теңшелетін сипаттарындағы бос жолдар мән ретінде есептеледі) жоюға немесе 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;