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.

html

<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

Dividers inowedzerwa otomatiki muCSS kuburikidza ::beforeuye content. Ivo vanogona kuchinjwa nekugadzirisa yemuno CSS tsika pfuma --bs-breadcrumb-divider, kana kuburikidza $breadcrumb-dividerneSass chinja - 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 muparadzi wepasirese waunogona kupfuudza pasina kudzoreredza CSS chero nguva.

html

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

Kushandisa yakamisikidzwa SVG

Inlining SVG se data URI inoda kuti URL itize mavara mashoma, kunyanya <, >uye #. Ndosaka $breadcrumb-dividershanduko ichipfuudzwa kuburikidza neyedu escape-svg()Sass basa . Paunenge uchishandisa CSS tsika chivakwa, unofanirwa ku URL kutiza SVG yako wega. Verenga tsananguro dzaKevin Weber paCodePen kuti uwane ruzivo rwakadzama pane zvekutiza.

html

<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='%236c757d'/%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,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

Iwe unogona zvakare kubvisa iyo divider kuseta --bs-breadcrumb-divider: '';(isina tambo muCSS tsika zvivakwa inoverengera seukoshi), kana kuseta iyo Sass inoshanduka ku $breadcrumb-divider: none;.

html

<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 ARIA Authoring Practices Guide breadcrumb pattern .

CSS

Variables

Yakawedzerwa mu v5.2.0

Sechikamu cheBootstrap chinoshanduka cheCSS chinosiyana chinosvika, zvimedu zvechingwa zvino shandisa emuno CSS madhizaini .breadcrumbpakusimudzira chaiyo-nguva kugadzirisa. Hwaro hwemhando dzeCSS dzakaiswa kuburikidza neSass, saka Sass customization ichiri kutsigirwa, zvakare.

  --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
  --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
  --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
  @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
  --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
  --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
  --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
  --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
  --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};

Sass zvakasiyana

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