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