PathBreadcrumbs
PathBreadcrumbs — продуктовая обёртка @cloud-ru/ds-breadcrumbs для слота breadcrumbs в HeaderLayout.
Когда использовать
- Отображение пути навигации в центральной зоне шапки.
- Длинные цепочки разделов с автоматическим truncate.
Примеры использования
Короткий путь
tsx
import { PathBreadcrumbs } from '@cloud-ru/ds-uikit-product-header';
const items = [
{ id: '1', label: 'Главная', href: '#' },
{ id: '2', label: 'Проект', href: '#' },
{ id: '3', label: 'Сервис' },
];
export function Basic() {
return <PathBreadcrumbs items={items} />;
}Длинный путь
tsx
import { PathBreadcrumbs } from '@cloud-ru/ds-uikit-product-header';
const items = [
{ id: '1', label: 'Главная', href: '#' },
{ id: '2', label: 'Организация', href: '#' },
{ id: '3', label: 'Проект', href: '#' },
{ id: '4', label: 'Раздел', href: '#' },
{ id: '5', label: 'Текущая страница' },
];
export function LongTrail() {
return <PathBreadcrumbs items={items} />;
}Props
Types
Props
PathBreadcrumbsProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
items | Item[] | — | yes | Пункты хлебных крошек. |