Breadcrumbs

Навигационная цепочка, показывающая путь от корня до текущей страницы. При нехватке ширины автоматически сворачивает средние элементы в коллапс-группу, сокращает лейблы до shortLabel или заменяет на многоточие.

Демо

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

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

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

Анатомия

Size

Плотность крошек: xs — для тесных поверхностей и сайдбаров, s — дефолт над заголовком страницы.

Item render mode

Способ отображения отдельного элемента цепочки: full — полный лейбл, shortLabel — укороченный (обычно первые буквы/aббревиатура), ellipsis — обрезан многоточием до ширины, collapsed — скрыт под троеточием-свёрткой. Режим применяется к элементам, когда цепочка не помещается в доступную ширину.

Установка

pnpm add @cloud-ru/ds-breadcrumbs

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

Примеры использования

Короткая цепочка

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} />;
}

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

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} />;
}

Кастомный разделитель

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='/' />;
}

Props

Types

BreadcrumbsProps

Item

Unions

Size

Storybook

Figma