Te kongakonga taro

Tohua te waahi o te wharangi o naianei i roto i te arowhai whakaterenga ka taapiri aunoa i nga kaiwehe ma te CSS.

Tauira

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

Te huri i te whakawehe

Ka taapiri aunoa nga kaiwehewehe i roto i te CSS ::beforeme te content. Ka taea te whakarereke ma te huri $breadcrumb-divider. Ko te mahi korero e hiahiatia ana hei whakaputa i nga korukī huri noa i te aho, na, ki te hiahia koe >hei whakawehe, ka taea e koe te whakamahi i tenei:

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

Ka taea hoki te whakamahi i te tohu SVG kua whakauruhia ki runga64 :

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

Ka taea te tango i te kaiwehewehe ma te tautuhi $breadcrumb-dividerki none:

$breadcrumb-divider: none;

Te urunga

I te mea ko nga kongakonga parāoa he whakaterenga, he pai ki te taapiri i tetahi tapanga whai kiko penei i aria-label="breadcrumb"te whakaahua i te momo whakaterenga e whakaratohia ana i roto i te <nav>huānga, me te tono tohu aria-current="page"ki te mea whakamutunga o te huinga hei tohu mo te wharangi o naianei.

Mo etahi atu korero, tirohia nga Tikanga Kaituhi WAI-ARIA mo te tauira kongakonga .