ekmek kırıntısı

Geçerli sayfanın konumunu, CSS aracılığıyla otomatik olarak ayırıcılar ekleyen bir gezinme hiyerarşisi içinde belirtin.

Bu sayfada

Örnek

Minimal tarzda bir içerik haritası oluşturmak için bağlantılı liste öğelerine sahip sıralı veya sırasız bir liste kullanın. İstediğiniz şekilde ek stiller eklemek için yardımcı programlarımızı kullanın.

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

Bölücüler

::beforeBölücüler, CSS'de ve aracılığıyla otomatik olarak eklenir content. Yerel bir CSS özel özelliği değiştirilerek --bs-breadcrumb-dividerveya $breadcrumb-dividerSass değişkeni aracılığıyla ve $breadcrumb-divider-flippedgerekirse RTL karşılığı için değiştirilebilirler. Özel özelliğe geri dönüş olarak ayarlanan Sass değişkenimizi varsayılan olarak ayarlıyoruz. Bu şekilde, herhangi bir zamanda CSS'yi yeniden derlemeden geçersiz kılabileceğiniz global bir ayırıcı elde edersiniz.

<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 aracılığıyla değişiklik yaparken, bir dize etrafında tırnak işaretleri oluşturmak için alıntı işlevi gerekir. Örneğin, >bölücü olarak şunu kullanabilirsiniz:

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

Gömülü bir SVG simgesi kullanmak da mümkündür . Bunu CSS özel özelliğimiz aracılığıyla uygulayın veya Sass değişkenini kullanın.

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

Ayırıcı ayarını da kaldırabilirsiniz --bs-breadcrumb-divider: '';(CSS özel özelliklerindeki boş dizeler bir değer olarak sayılır) veya Sass değişkenini olarak ayarlayabilirsiniz $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;

Ulaşılabilirlik

İçerik haritaları bir gezinme sağladığından, öğede aria-label="breadcrumb"sağlanan gezinme türünü açıklayan gibi anlamlı bir etiket eklemek ve kümenin geçerli sayfayı temsil ettiğini belirtmek için son öğeye bir uygulamak iyi bir fikirdir .<nav>aria-current="page"

Daha fazla bilgi için, kırıntı deseni için WAI-ARIA Yazma Uygulamalarına bakın .

küstah

Değişkenler

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