Breadcrumbs

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

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

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

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

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

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

Крошка-текст без popover.

Крошка с popover: связывает триггер и панель, собственной разметки не даёт.

Крошка-триггер — кнопка, открывающая popover своего Breadcrumbs.Menu.

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

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

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

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