ДокументацияРазделы, компоненты, системы и их подразделы
Хлебные крошки
Путь внутри иерархии
Navigation
Хлебные крошки показывают положение в иерархии
Компонент помогает вернуться на уровень выше, но не заменяет основную навигацию. Последний пункт обозначает текущую страницу и не является ссылкой.
Базовое использование
Передавайте пункты от общего уровня к текущей странице.
<x-ui.breadcrumbs>
BladeБазовый путь
<x-ui.breadcrumbs :items="[
['label' => 'Документация', 'href' => route('docs.index')],
['label' => 'Компоненты', 'href' => route('docs.show', ['section' => 'components'])],
['label' => 'Хлебные крошки', 'current' => true],
]" />Разделитель
По умолчанию используется «/». Символ можно изменить через prop, не добавляя его в названия пунктов.
separator="/"
separator="→"
Публичные классы
Blade-компонент формирует структуру автоматически; классы нужны при использовании чистой HTML-разметки.
.ox-breadcrumbs
.ox-breadcrumbs-list
.ox-breadcrumbs-item
.ox-breadcrumbs-link
.ox-breadcrumbs-separator
.ox-breadcrumbs-current
Доступность по умолчанию
aria-labelНавигация получает понятное имя «Хлебные крошки».aria-current="page"Последний или явно текущий пункт отмечается для скринридера.aria-hidden="true"Разделители исключаются из доступного имени пути.count > 1Компонент не выводится, если в пути только один пункт.