Хлебные крошки

Хлебные крошки показывают, где находится страница в глубокой иерархии: это цепочка ссылок наверх, до самого верхнего уровня.

Стабильный

Figma

Обзор

Использование

API

Доступность

Home

Docs

Components

Breadcrumb

<tk-breadcrumb>
  <tk-breadcrumb-item href="/">Home</tk-breadcrumb-item>
  <tk-breadcrumb-item href="/docs">Docs</tk-breadcrumb-item>
  <tk-breadcrumb-item href="/docs/components">Components</tk-breadcrumb-item>
  <tk-breadcrumb-item>Breadcrumb</tk-breadcrumb-item>
</tk-breadcrumb>

Анатомия

Часть	Что это
`tk-breadcrumb`	навигационный ориентир со списком по порядку
`tk-breadcrumb-item` с `href`	страница выше по иерархии: приглушённая ссылка
последний `tk-breadcrumb-item` без `href`	текущая страница: обычный тёмный текст, не ссылка
разделитель	шеврон между крошками, декоративный
кнопка «…»	в свёрнутой цепочке открывает меню со скрытыми крошками

Крошки

Элемент с href — ссылка. Это Link в тихом виде: приглушённая в покое, темнее и с подчёркиванием при наведении и фокусе. target и rel передаются ссылке.
Последний элемент без href — текущая страница. На него нельзя перейти фокусом, а скринридер называет его текущей страницей.
Чтобы цепочка заканчивалась на родителе, не добавляйте текущую страницу. Тогда все крошки будут ссылками.
Чтобы использовать ссылки своего роутера, не задавайте href и положите в элемент свой <a>.

Разделитель

Глиф в слоте separator заменяет шеврон во всех промежутках. Он остаётся декоративным.

Home

Blog

Release notes

<tk-breadcrumb>
  <span slot="separator">/</span>
  <tk-breadcrumb-item href="/">Home</tk-breadcrumb-item>
  <tk-breadcrumb-item href="/blog">Blog</tk-breadcrumb-item>
  <tk-breadcrumb-item>Release notes</tk-breadcrumb-item>
</tk-breadcrumb>

Длинная цепочка

max-items укорачивает длинную цепочку. Если крошек больше, остаются только первая и последняя, а между ними кнопка «…» открывает меню с остальными. Выбор пункта ведёт на эту страницу.

Home

Store

Pet supplies

Cats

Food

Wet food

<tk-breadcrumb max-items="4">
  <tk-breadcrumb-item href="/">Home</tk-breadcrumb-item>
  <tk-breadcrumb-item href="/store">Store</tk-breadcrumb-item>
  <tk-breadcrumb-item href="/store/pets">Pet supplies</tk-breadcrumb-item>
  <tk-breadcrumb-item href="/store/pets/cats">Cats</tk-breadcrumb-item>
  <tk-breadcrumb-item href="/store/pets/cats/food">Food</tk-breadcrumb-item>
  <tk-breadcrumb-item>Wet food</tk-breadcrumb-item>
</tk-breadcrumb>

Имя кнопки говорит, сколько крошек она прячет: «Show 4 more breadcrumbs».
Крошки в меню не открываются в новой вкладке и не дают контекстного меню ссылки. Первая и последняя крошки остаются настоящими ссылками.
Без max-items цепочка, которая не помещается в контейнер, переносится на вторую строку.

Иконки

Положите tk-icon в элемент перед текстом, обычно в первую крошку. Иконке рядом с текстом больше ничего не нужно. Если крошка состоит из одной иконки, задайте ей label: это станет именем ссылки.

Security

<tk-breadcrumb>
  <tk-breadcrumb-item href="/account"><tk-icon name="user" label="Account"></tk-icon></tk-breadcrumb-item>
  <tk-breadcrumb-item>Security</tk-breadcrumb-item>
</tk-breadcrumb>

Когда использовать

Крошки нужны, когда в иерархии три уровня и больше: документация, категории товаров, настройки, пути к файлам.
Для пошагового процесса, например оформления заказа, берите степпер. Крошки показывают место, а не прогресс.
Для неглубокого сайта или шага на уровень назад хватит одной ссылки «Назад».
Основная навигация — это Navigation menu или Sidebar. Крошки стоят рядом с ней и не заменяют её.

Текст

Берите для крошки заголовок самой страницы, тогда подпись называет, куда она ведёт.
Крошки короткие, заглавная буква только в начале, без точки в конце.
Не добавляйте слов вроде «Назад к» или «Перейти в».

Можно / нельзя

✅ Можно	❌ Нельзя
Крошки в глубокой иерархии	Крошки для шагов оформления заказа или плоского сайта
Текущая страница без `href`	Текущая страница в виде ссылки
Заголовок страницы в крошке	«Назад» или «Нажмите здесь»
Свернуть длинную цепочку через `max-items`	Цепочка на три строки
`label` у крошки из одной иконки	Крошка из иконки без имени

Link: каждая крошка — тихая ссылка.
Menu: хранит свёрнутые крошки.
Navigation menu и Sidebar: основная навигация.
Page header: где обычно стоят крошки, над заголовком.

API

`tk-breadcrumb`

Атрибут	Тип	По умолчанию	Что делает
`label`	string	`Breadcrumb`	доступное имя ориентира
`max-items`	number	—	если крошек больше, оставляет первую и последнюю, а остальные убирает в меню «…»

Слот	Содержимое
по умолчанию	элементы `tk-breadcrumb-item`, сначала верхний уровень, в конце текущая страница
`separator`	глиф, который заменяет шеврон во всей цепочке

`tk-breadcrumb-item`

Атрибут	Тип	По умолчанию	Что делает
`href`	string	—	куда ведёт крошка; без него последний элемент становится текущей страницей
`target`	string	—	`target` ссылки; `_blank` добавляет `noopener noreferrer`
`rel`	string	—	дополнительные значения `rel` для ссылки

Слот	Содержимое
по умолчанию	текст крошки, он же доступное имя; перед ним можно положить `tk-icon`

События

Своих событий нет. Ссылки в крошках ведут на страницу, как любые ссылки.

CSS

tk-breadcrumb::part(list): элемент <ol>.
tk-breadcrumb-item::part(link): Link крошки, если задан href.

Токены

Часть	Токены
ссылка-крошка	`text/secondary`; при наведении и фокусе `text/default` и подчёркивание
текущая страница	`text/default`
разделитель	`icon/tertiary`, 1em, по `space-8` с каждой стороны
рамка фокуса	`border/accent/focus`
кнопка «…» и меню	от Icon button (ghost, small) и Menu

Размер текста берётся у окружающего элемента. Значения по темам: Color.

Доступность

Встроено:

Ориентир <nav> с именем «Breadcrumb» вокруг списка по порядку.
У текущей страницы aria-current="page", фокусом на неё не перейти.
Разделители скрыты от скринридеров.
Каждая крошка — настоящая ссылка с видимой рамкой фокуса.
У кнопки «…» есть имя, и она управляется клавишами Menu.

На вашей стороне:

Ставьте крошки перед <main>, чтобы ссылка пропуска могла их обойти.
Если на странице двое крошек или крошки и ещё один <nav>, дайте каждому свой label.
В каждой крошке назовите, куда она ведёт; крошке из одной иконки задайте label.
На тёмной или инверсной поверхности держите контраст текста крошек не ниже 4.5:1.

Клавиша	Действие
`Tab`	переходит по ссылкам и кнопке «…»; текущую страницу пропускает
`Enter`	открывает ссылку в фокусе
`Enter` / `Space` / `Down` на «…»	открывает меню; дальше работают клавиши Menu

Анатомия

Крошки

Разделитель

Длинная цепочка

Иконки

Когда использовать

Текст

Можно / нельзя

Связанные

API

tk-breadcrumb

tk-breadcrumb-item

События

CSS

Токены

Доступность

`tk-breadcrumb`

`tk-breadcrumb-item`