خرده نان

مکان صفحه فعلی را در یک سلسله مراتب ناوبری که به طور خودکار جداکننده ها را از طریق CSS اضافه می کند، نشان دهید.

مثال

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

تعویض جداکننده

جداکننده ها به طور خودکار در CSS از طریق ::beforeو اضافه می contentشوند. آنها را می توان با تغییر تغییر داد $breadcrumb-divider. تابع نقل قول برای تولید نقل قول ها در اطراف یک رشته مورد نیاز است، بنابراین اگر >به عنوان جداکننده می خواهید، می توانید از این استفاده کنید:

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

همچنین می توان از یک نماد SVG تعبیه شده base64 استفاده کرد :

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

جداکننده را می توان با تنظیم $breadcrumb-dividerروی none:

$breadcrumb-divider: none;

دسترسی

از آنجایی که پودر سوخاری یک پیمایش را ارائه می‌دهد، بهتر است یک برچسب معنی‌دار اضافه کنید aria-label="breadcrumb"تا نوع پیمایش ارائه شده در <nav>عنصر را توصیف کند، و همچنین یک aria-current="page"علامت را در آخرین مورد از مجموعه اعمال کنید تا نشان دهد که صفحه فعلی را نشان می‌دهد.

برای اطلاعات بیشتر، به الگوی پودر سوخاری راهنمای شیوه‌های نویسندگی ARIA مراجعه کنید .