in English

Ekikuta ky’omugaati

Laga ekifo omuko oguliwo kati munda mu nsengeka y'okutambuliramu eyongerako ebyawula mu ngeri ey'otoma nga eyitira mu CSS.

Ku muko guno

Eky'okulabirako

Kozesa olukalala olulagirwa oba olutali lutegekeddwa nga luliko ebintu by’olukalala ebiyungiddwa okukola ekikuta ky’omugaati ekitali kya sitayiro ekitono. Kozesa ebikozesebwa byaffe okwongerako emisono emirala nga bw’oyagala.

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

Abagabanya ebintu

Ebigabanya byongerwako mu CSS mu ngeri ey'otoma okuyita mu ::beforene content. Ziyinza okukyusibwa nga zikyusa ekintu eky’ennono ekya CSS eky’omu kitundu --bs-breadcrumb-divider, oba okuyita mu $breadcrumb-dividernkyukakyuka ya Sass — era $breadcrumb-divider-flippedku munne RTL, bwe kiba kyetaagisa. Tusooka ku Sass variable yaffe, eteekebwawo nga fallback ku custom property. Mu ngeri eno, ofuna ekigabanya eky’ensi yonna ky’osobola okusazaamu nga toddamu kukungaanya CSS ekiseera kyonna.

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

Nga okyusa ng’oyita mu Sass, omulimu gw’okujuliza gwetaagibwa okukola ebijuliziddwa okwetooloola olunyiriri. Okugeza, ng’okozesa >ng’omugabanya, osobola okukozesa kino:

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

Era kisoboka okukozesa akabonero ka SVG akateekeddwamu . Kikozese ng'oyita mu kintu kyaffe ekya CSS custom, oba kozesa enkyukakyuka ya 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");

Osobola n'okuggyawo ensengeka y'omugabanya --bs-breadcrumb-divider: '';(ennyiriri ekyerere mu CSS custom properties zibalibwa ng'omuwendo), oba okuteeka enkyukakyuka ya Sass ku $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;

Okutuuka ku bantu

Okuva breadcrumbs bwe ziwa navigation, kirungi okwongerako akabonero ak'amakulu nga aria-label="breadcrumb"okunnyonnyola ekika ky'okutambuliramu ekiweereddwa mu <nav>elementi, wamu n'okukozesa an aria-current="page"ku kintu ekisembayo ekya set okulaga nti kikiikirira omuko oguliwo kati.

Okumanya ebisingawo, laba Enkola z’okuwandiika eya WAI-ARIA ku nkola y’omugaati .

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

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