Breadcrumb
Хлібні крихти для вкладеної структури — шлях від кореня до поточного місця.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
items* | BreadcrumbItem[] | — | Ланцюжок від кореня до поточного місця. |
ariaLabel | string | "Навігація" | Доступна назва навігації. |
Слоти
| Назва | Опис |
|---|---|
item | Власний рендер пункту. |
separator | Розділювач між пунктами. |
Коли використовувати
Коли структура глибша за один рівень і користувач має бачити, де він:
сайт → розділ → сторінка. Останній пункт — поточне місце, він текст, не
посилання (aria-current="page").
Коли НЕ використовувати
Замість основної навігації — крихти показують ШЛЯХ, а не розділи.
Для двох рівнів достатньо кнопки «Назад» — крихти не додають нічого.
Доступність
<nav aria-label> → <ol> → пункти; розділювачі приховані від
скрінрідера (aria-hidden). Список, а не рядок span'ів: скрінрідер
повідомляє «список, 4 пункти» і позицію в ньому.
На вузьких екранах рядок скролиться по осі X, а не переноситься: довгий ланцюжок не ламає висоту шапки.