Breadcrumbs

Breadcrumbs — составной компонент хлебных крошек: крошка ведёт на свой уровень, а стрелка рядом с ней открывает popover со смежными пунктами этого уровня.

Breadcrumbs.Root выстраивает содержимое в строку, части внутри него свободно комбинируются: крошка — Breadcrumbs.Item (текст или, с asChild, ссылка), крошка со смежными — Breadcrumbs.Menu, внутри которого крошка, стрелка Breadcrumbs.Trigger и панель Breadcrumbs.Popover. Внутри крошки — Breadcrumbs.Icon и Breadcrumbs.Label, разделители между крошками расставляются вручную (Breadcrumbs.Separator).

Компонент презентационный — контент popover (обычно список MenuItemButton) и его данные задаёт потребитель; popover монтируется лениво при открытии, так что данные можно загружать внутри него.

Использует: ScrollArea

Анатомия

Breadcrumbs.Root

Item

Icon | Label

Separator

Item

Icon | Label

Trigger

Popover

Примеры

Только текст

Крошки без стрелок и ссылок — некликабельный текст с разделителями; иконки опциональны.

Стрелка может быть у любого числа крошек — каждая открывает смежные пункты своего уровня и меняется независимо.

Длинный список

Высота popover ограничена — длинный список смежных пунктов скроллится внутри (ScrollArea уже встроена в Breadcrumbs.Popover, потребителю ничего делать не нужно).

label

API

Prop	Type	Default
`children`* Крошки и разделители между ними слева направо	`ReactNode`	-
`label` Подпись навигации для скринридера: без неё блок звучит просто «навигация», и его не отличить от меню	`string`	`"Хлебные крошки"`

Breadcrumbs.Item

Крошка уровня: текст или, с asChild (<Link> / <a>), ссылка на свой уровень с подсветкой при наведении. Крошки приглушены; текущая страница (current) — основным цветом и полужирная, с aria-current="page". Крошке сущности вместо Breadcrumbs.Icon можно дать Avatar размера xs прямым потомком — отступы крошки под него ужимаются.

Prop	Type	Default
`children`* Содержимое крошки — `Breadcrumbs.Icon` и `Breadcrumbs.Label`	`ReactNode`	-
`asChild` Отрендерить крошку как переданный элемент (напр. `<Link>` / `<a>`) вместо `<span>`, вживив в него классы и содержимое. Так крошка становится ссылкой на свой уровень и получает подсветку при наведении	`ReactElement<{ className?: string }>`	-
`current` Крошка — текущая страница: основной цвет и полужирное начертание (прочие крошки приглушены), для скринридера — `aria-current="page"`	`boolean`	-

Breadcrumbs.Menu

Крошка со смежными: ставит крошку и стрелку вплотную и связывает стрелку с её панелью.

Prop	Type	Default
`children`* Крошка уровня (`Breadcrumbs.Item`), стрелка (`Breadcrumbs.Trigger`) и панель со смежными пунктами (`Breadcrumbs.Popover`)	`ReactNode`	-

Breadcrumbs.Trigger

Стрелка рядом с крошкой — кнопка, открывающая popover своего Breadcrumbs.Menu; собственного текста не несёт — подпись для скринридера задаёт label (по умолчанию «Смежные»).

Prop	Type	Default
`label` Подпись кнопки для скринридера — что в её списке («Другие проекты»). Видимого текста у стрелки нет	`string`	`"Смежные"`

Breadcrumbs.Popover

Панель со смежными пунктами уровня крошки; монтируется лениво при открытии, длинный список скроллится внутри.

Prop	Type	Default
`children`* Смежные пункты уровня крошки (обычно список `MenuItemButton`). Монтируется лениво при открытии — данные можно грузить внутри	`ReactNode`	-

Breadcrumbs.Icon

Иконка рядом с текстом крошки — масштабируется вместе с ним и не сжимается.

Prop	Type	Default
`children`* Иконка рядом с текстом крошки	`ReactNode`	-

Breadcrumbs.Label

Текст крошки; обрезается многоточием, если не влезает.

Prop	Type	Default
`children`* Текст крошки — обрезается многоточием, если не влезает	`ReactNode`	-

Breadcrumbs.Separator

Разделитель между соседними крошками.

Компонент не принимает пропсов.