Breadcrumb

Nuduhake lokasi kaca saiki ing hirarki navigasi sing otomatis nambah pamisah liwat CSS.

Ing kaca iki

Tuladha

Gunakake dhaptar sing diurut utawa ora diurut karo item dhaptar sing disambung kanggo nggawe breadcrumb kanthi gaya minimal. Gunakake utilitas kita kanggo nambah gaya tambahan kaya sing dikarepake.

html

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

Pembagi

Pembagi ditambahake kanthi otomatis ing CSS liwat ::beforelan content. Padha bisa diganti kanthi ngowahi properti khusus CSS lokal --bs-breadcrumb-divider, utawa liwat $breadcrumb-dividervariabel Sass - lan $breadcrumb-divider-flippedkanggo mitra RTL, yen perlu. Kita standar kanggo variabel Sass, sing disetel minangka mundur menyang properti khusus. Kanthi cara iki, sampeyan entuk divider global sing bisa diganti tanpa nglumpukake CSS sawayah-wayah.

html

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

Nalika ngowahi liwat Sass, fungsi kuotasi dibutuhake kanggo ngasilake kuotasi watara senar. Contone, nggunakake >minangka divider, sampeyan bisa nggunakake iki:

$breadcrumb-divider: quote(">");

Sampeyan uga bisa nggunakake lambang SVG sing dipasang . Aplikasi liwat properti khusus CSS, utawa gunakake variabel Sass.

Nggunakake SVG sing dipasang

Inlining SVG minangka data URI mbutuhake URL uwal saka sawetara karakter, utamané <, >lan #. Pramila $breadcrumb-dividervariabel kasebut dilewati liwat escape-svg()fungsi Sass kita . Nalika nggunakake properti khusus CSS, sampeyan kudu URL uwal saka SVG sampeyan dhewe. Waca panjelasan Kevin Weber ing CodePen kanggo informasi rinci babagan apa sing kudu uwal.

html

<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>");

Sampeyan uga bisa mbusak setelan divider --bs-breadcrumb-divider: '';(string kosong ing properti adat CSS dianggep minangka nilai), utawa nyetel variabel Sass menyang $breadcrumb-divider: none;.

html

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

Aksesibilitas

Wiwit breadcrumbs nyedhiyakake pandhu arah, luwih becik sampeyan nambah label sing migunani kayata aria-label="breadcrumb"kanggo njlèntrèhaké jinis pandhu arah sing disedhiyakake ing <nav>unsur kasebut, uga nglamar aria-current="page"item pungkasan ing set kasebut kanggo nuduhake manawa kaca kasebut nuduhake kaca saiki.

Kanggo informasi luwih lengkap, deleng ARIA Authoring Practices Guide pola breadcrumb .

CSS

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, breadcrumbs saiki nggunakake variabel CSS lokal .breadcrumbkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

  --#{$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};

Variabel 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:          $gray-600;
$breadcrumb-active-color:           $gray-600;
$breadcrumb-divider:                quote("/");
$breadcrumb-divider-flipped:        $breadcrumb-divider;
$breadcrumb-border-radius:          null;