To switch between sections of the same level, use CdsTabs; for a link styled as text inside a paragraph, use CdsLink; and to move through the steps of a process, use CdsSteps.

Anatomy

Breadcrumbs are a ul list where links to the levels of the hierarchy alternate with dividers. The last item marks the current page and is not clickable, and an icon can precede the list.

Storybook

Variations

Items

The items array builds the breadcrumbs automatically: a string turns into text, an object turns into a link with href or to. The component marks the last item as the current page itself: it disables the link and paints it in a neutral color.

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

By default the items are separated by /. The divider prop replaces the character, and the divider slot replaces the whole markup — with a chevron icon, for example.

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

The icon prop renders an icon before the list — a sign of the root section, for example. The prepend slot replaces it with arbitrary content.

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>

Slots

Slots override parts of the list without giving up the automatic assembly from items. The title, divider and item slots receive item and index, so the content can be changed for every item separately.

Slot	Description
prepend	Content before the list. Replaces the icon from icon
title	Item text — a shared template for all items
divider	Divider content. Replaces the character from divider
item	The whole item — your own markup instead of CdsBreadcrumbsItem
default	Content after the items from items; used for manual assembly

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>

Manual assembly

When the path is not described by a flat array — you need your own handlers or non-standard items — build the list in the default slot from CdsBreadcrumbsItem and CdsBreadcrumbsDivider. Mark the current page with disabled, and limit a long title with max-width — the text is truncated with an ellipsis.

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>

Guidelines

Storybook

Scenarios

Section navigation

Breadcrumbs lead the user through the catalog tree: links in the list open deeper sections, a click on a crumb returns one level up. In an application with vue-router, pass to to the items instead of handlers — the navigation and the active state of the link work on their own.

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>

Long path

Collapse a deep hierarchy down to the first level, an ellipsis and the last two steps — the path stays on a single line. A click on the ellipsis expands the full list.

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

Props

Name	Type	Default	Description
activeClass	string | undefined	—	Class applied to the component when it is in the active state
activeColor	string | undefined	—	Color of the component in its active state
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
color	string | undefined	—	Component color
disabled	boolean | null | undefined	null	Disabled state
divider	string | undefined	'/'	Divider between the child components
icon	IconValue | undefined	—	Icon displayed next to the component
items	readonly BreadcrumbItem[] | undefined	[]	Array of strings or objects used to build the child components automatically
tag	string | JSXComponent<any> | undefined	'ul'	Custom HTML tag or component to render
textColor	string | undefined	—	Text color of the component

Slots

Name	Type	Description
default	any	Default content
divider	{ item: BreadcrumbItem; index: number; }	Divider content between the items; can be overridden for each item
item	{ item: InternalBreadcrumbItem; index: number; }	Item content; can be overridden for each item
prepend	any	Content at the start
title	{ item: InternalBreadcrumbItem; index: number; }	Content inside each item; can be overridden for each item

CdsBreadcrumbsDivider

Props

Name	Type	Default	Description
divider	string | number | undefined	—	Divider

Slots

Name	Type	Description
default	any	Default content

CdsBreadcrumbsItem

Props

Name	Type	Default	Description
active	boolean | undefined	—	Active state of the component; usually marks the current page in the navigation
activeClass	string | undefined	—	Class applied to the component when it is in the active state
activeColor	string | undefined	—	Color of the component in its active state
baseColor	string | undefined	—	Color of the component in its inactive state
bgColor	string | undefined	—	Background color of the component
color	string | undefined	—	Component color
disabled	boolean | null | undefined	null	Disabled state
exact	boolean | undefined	—	If true, the active state applies only on an exact route match
href	string | undefined	—	The href attribute of the link. When set, the component behaves as a regular link
maxWidth	string | number | undefined	—	Maximum component width
replace	boolean | undefined	—	If true, navigation replaces the current history entry instead of pushing a new one
tag	string | JSXComponent<any> | undefined	'li'	Custom HTML tag or component to render
textColor	string | undefined	—	Text color of the component
title	string | undefined	—	Item title displayed in the component
to	LinkTo | undefined	—	Target route or route location object for RouterLink. When set, the component behaves as a RouterLink
width	string | number | undefined	—	Component width

Slots

Name	Type	Description
default	any	Default content