Breadcrumb

Nuduhake lokasi kaca saiki ing hirarki navigasi sing kanthi 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.

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

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

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

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

<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 Praktik Penulisan WAI-ARIA kanggo pola breadcrumb .

Sass

Variabel

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