Breadcrumb
Путь до текущей страницы
Ничего не выбрано
Кастомный разделитель
Короткая цепочка
Входные параметры
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
items | BreadcrumbItem[] | [] | Цепочка пунктов. Тип BreadcrumbItem: label (текст), необязательные to (маршрут приложения) и href (внешняя ссылка). |
separator | string | '/' | Разделитель между пунктами. |
ariaLabel | string | 'Хлебные крошки' | Подпись навигации для скринридеров. |
События
| Имя | Аргументы | Когда срабатывает |
|---|---|---|
select | item: BreadcrumbItem | При клике по промежуточному пункту-ссылке (не текущему). |
Описание
Компонент C3Breadcrumb отображает хлебные крошки — цепочку ссылок с разделителями, помогающую пользователю понять текущее положение в структуре приложения и вернуться на уровень выше.
Промежуточные пункты с to/href рендерятся ссылками и эмитят событие select, а последний пункт всегда считается текущей страницей и помечается aria-current="page" без ссылки.
Дополнительная информация
- Компонент не использует
v-model. - Разделители выставляются между всеми пунктами, кроме первого, и скрываются от скринридеров через
aria-hidden="true". - Обёртка — элемент
<nav>сaria-label; список построен на<ol>/<li>для корректной семантики упорядоченной навигации. - Клик по текущему (последнему) пункту не эмитит
select, так как он не является ссылкой.