# @cloud-ru/ds-breadcrumbs

> Хлебные крошки — навигационная цепочка пути до текущей страницы с адаптивным поведением при нехватке места.

Docs: /snack-v2/components/breadcrumbs/

## Установка

```sh
pnpm add @cloud-ru/ds-breadcrumbs
```

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

- Когда пользователь может находиться глубоко в иерархии разделов и ему нужно быстро вернуться на уровень выше.
- В админках, каталогах, файловых менеджерах — там, где есть естественная вложенность.
- Как дополнение к заголовку страницы, **не** как замена основной навигации.

Когда **не** нужен: плоский сайт из 2–3 страниц, одностраничные приложения без иерархии, поисковые результаты.

## API

### Breadcrumbs
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no | CSS-класс |
| `data-test-id` | `string` | — | no |  |
| `firstItemIconOnly` | `boolean` | `false` | no | Использовать иконку без лейбла в первом айтеме |
| `inactiveLastItem` | `boolean` | `false` | no | Делает некликабельным последний элемент, даже если для него переданы `href` или `onClick` |
| `items` | `Item[]` | — | yes | Массив айтемов |
| `separator` | `string` | `/` | no | Разделитель между пунктами |
| `size` | `s \| xs` | `s` | no | Размер |

#### Related types
- `Item` (interface)
- `Size` = `s | xs`

### Collapse
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no |  |
| `currentConfig` | `BreadcrumbsConfigChain` | — | yes |  |

### Crumb
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no |  |
| `current` | `boolean` | — | no |  |
| `data-test-id` | `string` | — | no |  |
| `item` | `Item` | — | yes |  |
| `minWidth` | `number` | — | no |  |
| `renderMode` | `collapsed \| ellipsis \| full \| shortLabel` | — | yes |  |
| `useIconOnly` | `boolean` | — | no |  |

### CrumbsTypography
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no |  |
| `size` | `s \| xs` | — | yes |  |

### HiddenChain
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `firstItemIconOnly` | `boolean` | — | no |  |
| `items` | `Item[]` | — | yes |  |
| `onConfigsBuilt` | `(config: BreadcrumbsConfig[]) => void` | — | yes |  |
| `separator` | `string` | — | yes |  |
| `size` | `s \| xs` | — | yes |  |

### Wrapper
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `className` | `string` | — | no |  |
| `data-test-id` | `string` | — | no |  |
| `hidden` | `boolean` | — | yes |  |
| `separator` | `string` | — | yes |  |
| `size` | `s \| xs` | — | yes |  |

## Примеры

### BasicTrail

```tsx
import { Breadcrumbs } from '@cloud-ru/ds-breadcrumbs';

const items = [
  { id: '1', label: 'Главная', href: '#' },
  { id: '2', label: 'Документы', href: '#' },
  { id: '3', label: 'Текущая страница' },
];

export function BasicTrail() {
  return <Breadcrumbs items={items} />;
}
```

### CustomSeparator

```tsx
import { Breadcrumbs } from '@cloud-ru/ds-breadcrumbs';

const items = [
  { id: '1', label: 'Dashboard', href: '#' },
  { id: '2', label: 'Projects', href: '#' },
  { id: '3', label: 'Astro' },
];

export function CustomSeparator() {
  return <Breadcrumbs items={items} separator='/' />;
}
```

### LongTrail

```tsx
import { Breadcrumbs } from '@cloud-ru/ds-breadcrumbs';

const items = [
  { id: '1', label: 'Литература', href: '#' },
  { id: '2', label: 'Стихи', href: '#' },
  { id: '3', label: 'Золотой век русской поэзии', shortLabel: 'Золотой век', href: '#' },
  { id: '4', label: 'Михаил Лермонтов', shortLabel: 'Лермонтов', href: '#' },
  { id: '5', label: 'Тема "Одиночество"', shortLabel: 'Одиночество', href: '#' },
  { id: '6', label: 'Парус' },
];

export function LongTrail() {
  return <Breadcrumbs items={items} />;
}
```