Lai palaoa

Hōʻike i kahi o ka ʻaoʻao o kēia manawa i loko o kahi hierarchy hoʻokele e hoʻohui ʻakomi i nā mea hoʻokaʻawale ma o CSS.

Laʻana

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

Ke hoʻololi nei i ka mea hoʻokaʻawale

Hoʻohui ʻia nā mea hoʻokaʻawale i CSS ma o ::beforea content. Hiki ke hoʻololi iā lākou ma ka hoʻololi ʻana $breadcrumb-divider. Pono ka hana quote e hoʻopuka i nā huaʻōlelo a puni kahi kaula, no laila inā makemake ʻoe ma ke ʻano >he mea hoʻokaʻawale, hiki iā ʻoe ke hoʻohana i kēia:

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

Hiki nō ke hoʻohana i ka base64 embedded SVG icon :

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

Hiki ke wehe ʻia ka mea hoʻokaʻawale ma ka hoʻonohonoho $breadcrumb-dividerʻana iā none:

$breadcrumb-divider: none;

Hiki ke komo

Ma muli o ka hoʻokele ʻana i ka palaoa, he manaʻo maikaʻi e hoʻohui i kahi lepili koʻikoʻi e like me aria-label="breadcrumb"ka wehewehe ʻana i ke ʻano o ka hoʻokele i hāʻawi ʻia i ka <nav>mea, a me ka hoʻopili ʻana i kahi mea aria-current="page"hope o ka set e hōʻike ai i ka ʻaoʻao o kēia manawa.

No ka 'ike hou aku, e 'ike i ka ARIA Authoring Practices Guide pattern breadcrumb .