Breadcrumb

Ratidza nzvimbo yepeji iripo mukati mehurongwa hwekufambisa hunowedzera vapatsanuri kuburikidza neCSS.

Pa peji ino

Muenzaniso

Shandisa yakaodha kana isina kurongeka rondedzero ine yakabatana rondedzero zvinhu kuti ugadzire yakaderera styled breadcrumb. Shandisa zvishandiso zvedu kuwedzera mamwe masitayera sezvaunoda.

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

Vapesanisi

Vaparidzi vanowedzerwa otomatiki muCSS kuburikidza ::beforeuye content. Ivo vanogona kushandurwa nekugadzirisa yemuno CSS tsika pfuma --bs-breadcrumb-divider, kana kuburikidza $breadcrumb-dividerneiyo Sass shanduko - uye $breadcrumb-divider-flippedkune yayo RTL mumwe, kana zvichidikanwa. Isu tinosarudzika kune yedu Sass kusiyanisa, iyo inomisikidzwa sekudzokera kumashure kune tsika tsika. Nenzira iyi, iwe unowana kupatsanurwa kwepasirese kwaunogona kudarika pasina kudzoreredza CSS chero nguva.

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

Paunenge uchigadzirisa kuburikidza neSass, iyo quote basa inodiwa kugadzira makotesheni akatenderedza tambo. Semuenzaniso, uchishandisa >sedivider, unogona kushandisa izvi:

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

Zvinogoneka zvakare kushandisa yakamisikidzwa SVG icon . Ishandise kuburikidza neyedu CSS tsika chivakwa, kana shandisa iyo Sass inoshanduka.

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

Iwe unogona zvakare kubvisa iyo divider kuseta --bs-breadcrumb-divider: '';(isina tambo muCSS tsika zvivakwa inoverengera seukoshi), kana kuseta iyo Sass inosiyana kusvika $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;

Accessibility

Sezvo breadcrumbs achipa kufamba, ipfungwa yakanaka kuwedzera chirevo chine musoro sekutsanangura aria-label="breadcrumb"rudzi rwekufambisa rwakapihwa <nav>muchinhu, pamwe nekushandisa aria-current="page"kune yekupedzisira chinhu cheseti kuratidza kuti inomiririra peji razvino.

Kuti uwane rumwe ruzivo, ona iyo WAI-ARIA Kunyorera Maitiro eiyo breadcrumb pateni .

Sass

Variables

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