Для переключения разделов одного уровня подойдёт CdsTabs, для перехода, оформленного как текст в абзаце, — CdsLink, а для движения по шагам процесса — CdsSteps.

Анатомия

Хлебные крошки — список ul, в котором ссылки на уровни иерархии перемежаются разделителями. Последний элемент обозначает текущую страницу и не кликается, а перед списком можно вывести иконку.

Storybook

Вариации

Элементы

Массив items собирает крошки автоматически: строка превращается в текст, объект — в ссылку с href или to. Последний элемент компонент сам помечает текущей страницей: отключает ссылку и красит в нейтральный цвет.

Sandbox Storybook

<script setup lang="ts">
import { CdsBreadcrumbs } from '@central-design-system/components';

const items = [
  { title: 'Главная', href: '#' },
  { title: 'Каталог', href: '#' },
  { title: 'Оргтехника', href: '#' },
  { title: 'Принтеры' }
];
</script>

<template>
  <div class="flex justify-center">
    <CdsBreadcrumbs :items="items" />
  </div>
</template>

Разделитель

По умолчанию элементы разделяет /. Проп divider заменяет символ, а слот divider — разметку целиком, например на иконку-шеврон.

Sandbox Storybook

<script setup lang="ts">
import { CdsBreadcrumbs, CdsIcon } from '@central-design-system/components';

const items = [{ title: 'Главная', href: '#' }, { title: 'Документы', href: '#' }, { title: 'Отчёт за июль' }];
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsBreadcrumbs :items="items" divider="→" />

    <CdsBreadcrumbs :items="items">
      <template #divider>
        <CdsIcon icon="chevron-right" :size="16" />
      </template>
    </CdsBreadcrumbs>
  </div>
</template>

Иконка

Проп icon выводит иконку перед списком — например, знак корневого раздела. Слот prepend заменяет её произвольным контентом.

Sandbox Storybook

<script setup lang="ts">
import { CdsBreadcrumbs } from '@central-design-system/components';

const items = [{ title: 'Главная', href: '#' }, { title: 'Настройки', href: '#' }, { title: 'Профиль' }];
</script>

<template>
  <div class="flex justify-center">
    <CdsBreadcrumbs :items="items" icon="dashboard" />
  </div>
</template>

Слоты

Слоты переопределяют части списка, не отказываясь от автоматической сборки через items. Слоты title, divider и item получают item и index — контент можно менять для каждого элемента отдельно.

Слот	Описание
prepend	Контент перед списком. Замещает иконку из icon
title	Текст элемента — общий шаблон для всех элементов
divider	Контент разделителя. Замещает символ из divider
item	Элемент целиком — своя разметка вместо CdsBreadcrumbsItem
default	Контент после элементов из items; используется при ручной сборке

Sandbox Storybook

<script setup lang="ts">
import { CdsBreadcrumbs, CdsIcon } from '@central-design-system/components';

const items = [{ title: 'Главная', href: '#' }, { title: 'Проекты', href: '#' }, { title: 'Редизайн сайта' }];
</script>

<template>
  <div class="flex justify-center">
    <CdsBreadcrumbs :items="items">
      <template #title="{ item, index }">
        <CdsIcon v-if="index === 0" icon="dashboard" :size="16" start />
        {{ item.title }}
      </template>
    </CdsBreadcrumbs>
  </div>
</template>

Ручная сборка

Когда путь не описывается плоским массивом — нужны свои обработчики или нестандартные элементы, — соберите список в слоте default из CdsBreadcrumbsItem и CdsBreadcrumbsDivider. Текущую страницу пометьте disabled, а длинное название ограничьте max-width — текст обрежется многоточием.

Sandbox Storybook

<script setup lang="ts">
import { CdsBreadcrumbs, CdsBreadcrumbsDivider, CdsBreadcrumbsItem } from '@central-design-system/components';
</script>

<template>
  <div class="flex justify-center">
    <CdsBreadcrumbs>
      <CdsBreadcrumbsItem href="#">Главная</CdsBreadcrumbsItem>
      <CdsBreadcrumbsDivider />
      <CdsBreadcrumbsItem href="#" max-width="140">Документы отдела продаж</CdsBreadcrumbsItem>
      <CdsBreadcrumbsDivider />
      <CdsBreadcrumbsItem disabled>Отчёт за июль</CdsBreadcrumbsItem>
    </CdsBreadcrumbs>
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Навигация по разделам

Крошки ведут пользователя по дереву каталога: ссылки в списке открывают разделы глубже, клик по крошке возвращает на уровень выше. В приложении с vue-router вместо обработчиков передайте элементам to — переход и активное состояние ссылки отработают автоматически.

Sandbox Storybook

<script setup lang="ts">
import { CdsBreadcrumbs, CdsBreadcrumbsDivider, CdsBreadcrumbsItem, CdsLink } from '@central-design-system/components';
import { computed, ref } from 'vue';

interface Section {
  title: string;
  children?: Section[];
}

const catalog: Section = {
  title: 'Каталог',
  children: [
    {
      title: 'Офисная техника',
      children: [{ title: 'Принтеры' }, { title: 'Мониторы' }]
    },
    {
      title: 'Мебель',
      children: [{ title: 'Столы' }, { title: 'Кресла' }]
    },
    { title: 'Канцтовары' }
  ]
};

const path = ref<Section[]>([catalog]);

const current = computed(() => path.value[path.value.length - 1]);

const open = (section: Section) => path.value.push(section);
const goTo = (index: number) => (path.value = path.value.slice(0, index + 1));
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-3 m-auto">
    <CdsBreadcrumbs>
      <template v-for="(section, index) in path" :key="section.title">
        <CdsBreadcrumbsDivider v-if="index > 0" />
        <CdsBreadcrumbsItem v-if="index < path.length - 1" href="#" @click.prevent="goTo(index)">
          {{ section.title }}
        </CdsBreadcrumbsItem>
        <CdsBreadcrumbsItem v-else disabled>{{ section.title }}</CdsBreadcrumbsItem>
      </template>
    </CdsBreadcrumbs>

    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="child in current.children" :key="child.title">
        <CdsLink href="#" :text="child.title" @click.prevent="open(child)" />
      </li>
      <li v-if="!current.children">В разделе «{{ current.title }}» пока пусто — вернитесь по крошкам выше.</li>
    </ul>
  </div>
</template>

Длинный путь

Глубокую иерархию сверните до первого уровня, многоточия и двух последних шагов — путь остаётся в одну строку. Клик по многоточию раскрывает полный список.

Sandbox Storybook

<script setup lang="ts">
import { CdsBreadcrumbs, CdsBreadcrumbsDivider, CdsBreadcrumbsItem } from '@central-design-system/components';
import { computed, ref } from 'vue';

const path = ['Главная', 'Документы', 'Договоры', '2026', 'Поставщики', 'Договор № 114'];

const expanded = ref(false);

const visible = computed(() => (expanded.value ? path : [path[0], '…', ...path.slice(-2)]));
</script>

<template>
  <div class="flex justify-center">
    <CdsBreadcrumbs>
      <template v-for="(title, index) in visible" :key="title">
        <CdsBreadcrumbsDivider v-if="index > 0" />
        <CdsBreadcrumbsItem v-if="title === '…'" href="#" title="…" @click.prevent="expanded = true" />
        <CdsBreadcrumbsItem v-else-if="index < visible.length - 1" href="#" :title="title" @click.prevent />
        <CdsBreadcrumbsItem v-else disabled :title="title" />
      </template>
    </CdsBreadcrumbs>
  </div>
</template>

API

CdsBreadcrumbs

Пропсы

Имя	Тип	По умолчанию	Описание
activeClass	string | undefined	—	Класс, применяемый к компоненту, когда он находится в активном состоянии
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
disabled	boolean | null | undefined	null	Заблокированное состояние
divider	string | undefined	'/'	Разделитель между дочерними компонентами
icon	IconValue | undefined	—	Иконка отображаемая рядом с компонентом
items	readonly BreadcrumbItem[] | undefined	[]	Массив строк или объектов, используемый для автоматического создания дочерних компонентов
tag	string | JSXComponent<any> | undefined	'ul'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента

Слоты

Имя	Тип	Описание
default	any	Контент по-умолчанию
divider	{ item: BreadcrumbItem; index: number; }	Контент разделителя между элементами, который может быть переопределён для каждого элемента
item	{ item: InternalBreadcrumbItem; index: number; }	Контент элемента, который может быть переопределён для каждого элемента
prepend	any	Контент в начале
title	{ item: InternalBreadcrumbItem; index: number; }	Контент внутри каждого элемента, который может быть переопределён для каждого элемента

CdsBreadcrumbsDivider

Пропсы

Имя	Тип	По умолчанию	Описание
divider	string | number | undefined	—	Разделитель

Слоты

Имя	Тип	Описание
default	any	Контент по-умолчанию

CdsBreadcrumbsItem

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Активное состояние компонента, обычно используется для обозначения текущей страницы в навигации
activeClass	string | undefined	—	Класс, применяемый к компоненту, когда он находится в активном состоянии
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
disabled	boolean | null | undefined	null	Заблокированное состояние
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
maxWidth	string | number | undefined	—	Максимальная ширина компонента
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
tag	string | JSXComponent<any> | undefined	'li'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента
title	string | undefined	—	Заголовок элемента, отображаемый в компоненте
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
default	any	Контент по-умолчанию