Breadcrumbs

Breadcrumbs показують шлях від головної сторінки до поточної — реалізуються через nav з упорядкованим списком посилань.

Код

<nav aria-label="Breadcrumb">
  <ol style="display:flex;gap:0.5rem;list-style:none;padding:0;margin:0">
    <li><a href="/">Головна</a></li>
    <li>/</li>
    <li><a href="/blog">Блог</a></li>
    <li>/</li>
    <li aria-current="page">Стаття</li>
  </ol>
</nav>

Попередній перегляд

Пояснення

Останній елемент (поточна сторінка) не є посиланням і має aria-current="page" замість href. ol використано, бо порядок кроків має значення.

Роздільник "/" можна замінити на CSS ::after замість окремого <li>, щоб не плутати з реальними пунктами шляху для screen-читачів.

Схожі інструменти

Accessible navigation menu

Семантичне навігаційне меню з aria-label та коректним використанням nav/ul/a.