Biloko ya kosala mampa

Lakisa esika ya lokasa ya lelo na kati ya hiérarchie ya navigation oyo ebakisi automatiquement ba séparateurs na nzela ya CSS.

Ndakisa

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

Kobongola eloko oyo ekabolaka biloko

Ba séparateurs ebakisami automatiquement na CSS na nzela ya ::beforempe content. Bakoki kobongwana na kobongola yango $breadcrumb-divider. Mosala ya ba citations esengeli mpo na kobimisa ba citations zingazinga ya molongo, yango wana soki olingi >lokola kokabola, okoki kosalela oyo:

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

Ezali mpe na nzela ya kosalela elembo ya SVG oyo ezali na kati ya base64 :

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

Separateur ekoki kolongolama na kotiya $breadcrumb-dividerna none:

$breadcrumb-divider: none;

Kozala na makoki ya kozwa yango

Lokola breadcrumbs epesaka navigation, ezali likanisi malamu kobakisa étiquette ya tina lokola aria-label="breadcrumb"kolimbola lolenge ya navigation oyo epesami na <nav>élément, mpe lisusu kosalela an aria-current="page"na eloko ya suka ya ensemble mpo na kolakisa ete ezali komonisa lokasa ya lelo.

Mpo na koyeba makambo mingi, tala Mimeseno ya Bokomi ya WAI-ARIA mpo na motindo ya kokata mampa .