Abodoo a wɔayam

Kyerɛ beae a krataafa a ɛwɔ hɔ mprempren no wɔ wɔ akwantu nhyehyɛe bi a ɛde mpaapaemu ahorow ka ho ankasa denam CSS so.

Nhwɛsoɔ

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

Sesa a wɔde tew nneɛma mu no

Wɔde separators ka ho ankasa wɔ CSS mu denam ::beforene content. Wobetumi asesa wɔn denam nsakrae a wɔbɛyɛ so $breadcrumb-divider. Quote dwumadie no ho hia na ama woatumi ayɛ quotes a atwa ahama bi ho ahyia, enti sɛ wopɛ >sɛ seperator a, wobɛtumi de yei adi dwuma:

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

Ɛsan nso yɛ yie sɛ wode base64 embedded SVG icon bedi dwuma :

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

Wobetumi ayi separator no afi hɔ denam sɛ wode besi hɔ $breadcrumb-dividersɛ none: .

$breadcrumb-divider: none;

Nneɛma a wotumi nya

Esiane sɛ breadcrumbs ma navigation nti, ɛyɛ adwene pa sɛ wode label a ntease wom bɛka ho te sɛ aria-label="breadcrumb"nea wobɛkyerɛkyerɛ navigation ko a wɔde ama wɔ <nav>element no mu, ne sɛnea wode an bedi dwuma aria-current="page"wɔ ade a etwa to wɔ set no mu de akyerɛ sɛ egyina hɔ ma krataafa a ɛwɔ hɔ mprempren no.

Sɛ wopɛ nsɛm pii a, hwɛ WAI-ARIA Authoring Practices ma breadcrumb pattern no .