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 Buku ya Mimeseno ya Bokomi ya ARIA motindo ya kokata mampa .