Xiphemu xa xinkwa

Kombisa ndhawu ya tluka ra sweswi endzeni ka xiyimo xa ku famba-famba lexi hi xoxe xi engetelaka swihambanisi hi ku tirhisa CSS.

Eka tluka leri

Xikombiso

Tirhisa nxaxamelo lowu odaweke kumbe lowu nga odawangiki lowu nga ni swilo swa nxaxamelo leswi hlanganisiweke ku endla xiphemu xa xinkwa lexi nga ni xitayili lexitsongo. Tirhisa switirhisiwa swa hina ku engetela switayele leswi engetelekeke hilaha u lavaka hakona.

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

Swihambanisi

Swihambanisi swi engeteriwa hi ku tisungulela eka CSS hi ku tirhisa ::beforena content. Swi nga cinciwa hi ku cinca nhundzu ya ntolovelo ya CSS ya laha kaya --bs-breadcrumb-divider, kumbe hi ku tirhisa $breadcrumb-dividerxihlawulekisi xa Sass — na $breadcrumb-divider-flippedle ka mutirhisani wa yona wa RTL, loko swi laveka. Hi default eka Sass variable ya hina, leyi vekiweke tanihi fallback eka custom property. Hi ndlela leyi, u kuma xihambanisi xa misava hinkwayo lexi u nga xi tlulaka handle ko hlengeleta nakambe CSS nkarhi wihi na wihi.

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

Loko u cinca hi ku tirhisa Sass, ntirho wa swikombo wu laveka ku tumbuluxa swikombo ku rhendzela ntambhu. Hi xikombiso, hi ku tirhisa >tanihi xihambanisi, u nga tirhisa leswi:

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

Swi tlhela swi koteka ku tirhisa xifaniso xa SVG lexi nghenisiweke . Yi tirhise hi ku tirhisa nhundzu ya hina ya ntolovelo ya CSS, kutani u tirhisa xihlawulekisi xa 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");

U nga ha tlhela u susa xiyimiso xa xihambanisi --bs-breadcrumb-divider: '';(tintambhu leti nga riki na nchumu eka swihlawulekisi swa ntolovelo swa CSS ti hlayiwa tanihi ntikelo), kumbe u veka xihlawulekisi xa Sass eka $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;

Ku fikelela

Leswi ti breadcrumbs ti nyikaka ku fambafamba, i mhaka ya kahle ku engetela lebula leyi nga na nhlamuselo yo fana na aria-label="breadcrumb"ku hlamusela muxaka wa ku fambafamba loku nyikiweke eka <nav>elemente, xikan’we na ku tirhisa an aria-current="page"eka nchumu wo hetelela wa sete ku kombisa leswaku yi yimela tluka ra sweswi.

Ku kuma vuxokoxoko byo tala, vona Maendlelo ya Vutsari ya WAI-ARIA ya xivumbeko xa breadcrumb .

Sass

Swilo leswi cinca-cincaka

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