Тулбар только раскладывает содержимое — место в макете резервируют CdsHeader и CdsFooter. Для навигации по подразделам возьмите CdsTabs, для панели действий над записью — CdsButtonGroup.

Анатомия

Тулбар выстраивает содержимое в строку и выравнивает его по центру по вертикали. Заголовок CdsToolbarTitle занимает всё свободное место, поэтому элементы до него прижимаются к левому краю, а после — к правому.

Storybook

Вариации

Заголовок

CdsToolbarTitle растягивается и обрезает длинный текст многоточием, не ломая строку. Свойство shrink отключает растягивание: заголовок сжимается по содержимому и остаётся рядом с соседним элементом — так удобно ставить после названия статус или счётчик.

Sandbox Storybook

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

<template>
  <div class="flex flex-col gap-4">
    <CdsToolbar bordered>
      <CdsToolbarTitle>Заголовок растягивается и разводит группы по краям</CdsToolbarTitle>
      <CdsButton size="sm">Действие</CdsButton>
    </CdsToolbar>

    <CdsToolbar bordered>
      <CdsToolbarTitle shrink>Заголовок с shrink остаётся рядом с кнопкой</CdsToolbarTitle>
      <CdsButton size="sm">Действие</CdsButton>
    </CdsToolbar>

    <CdsToolbar bordered>
      <CdsToolbarTitle>Очень длинный заголовок раздела, который не помещается в одну строку тулбара</CdsToolbarTitle>
      <CdsButton size="sm">Действие</CdsButton>
    </CdsToolbar>
  </div>
</template>

Отступы

Свойство no-gutters убирает внутренние отступы целиком — тулбар выравнивается по содержимому страницы. Свойство no-gutter снимает отступ с одной стороны: start или end. Свойство inset наоборот добавляет отступ слева — так отбивают вложенный тулбар второго уровня.

Sandbox Storybook

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

<template>
  <div class="m-auto flex w-full max-w-[560px] flex-col gap-4">
    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">По умолчанию</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered>
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">no-gutters</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered no-gutters>
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">no-gutter="start"</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered no-gutter="start">
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">no-gutter="end"</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered no-gutter="end">
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>

    <div class="flex flex-col gap-1">
      <span class="text-content-secondary">inset</span>
      <div class="rounded-200 border border-dashed border-line-primary">
        <CdsToolbar bordered inset>
          <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
          <CdsButton size="sm">Действие</CdsButton>
        </CdsToolbar>
      </div>
    </div>
  </div>
</template>

Разделитель и цвет

Свойство bordered рисует нижнюю границу — она отделяет заголовок раздела от содержимого. Свойства bg-color и color красят фон и текст. Внутри CdsHeader и CdsFooter тулбар свой фон не рисует: цвет приходит от части макета, чтобы полоса не перекрывала её собой.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsRadio, CdsRadioGroup, CdsToolbar, CdsToolbarTitle } from '@central-design-system/components';
import { ref } from 'vue';

const bgColor = ref('default');
</script>

<template>
  <div class="flex flex-col gap-4">
    <CdsRadioGroup v-model="bgColor" direction="horizontal" hide-details>
      <CdsRadio value="default" label="Цвет темы" />
      <CdsRadio value="neutral" label="neutral" />
      <CdsRadio value="indigo" label="indigo" />
      <CdsRadio value="lemon" label="lemon" />
    </CdsRadioGroup>

    <CdsToolbar bordered :bg-color="bgColor === 'default' ? undefined : bgColor">
      <CdsToolbarTitle>Заголовок раздела</CdsToolbarTitle>
      <CdsButton variant="soft" color="neutral" size="sm">Действие</CdsButton>
    </CdsToolbar>
  </div>
</template>

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

Storybook

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

Заголовок раздела страницы

Название, статус и действия в одной строке: shrink прижимает статус к названию, mr-auto отодвигает кнопки к правому краю, no-gutters выравнивает тулбар по содержимому карточки, а bordered отделяет шапку раздела от текста.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCard,
  CdsFunctionalButton,
  CdsStatus,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
</script>

<template>
  <CdsCard class="m-auto w-full max-w-[640px] p-4">
    <CdsToolbar no-gutters bordered class="mb-4 gap-2">
      <CdsToolbarTitle shrink class="text-xl font-bold">Закупка №2401</CdsToolbarTitle>
      <CdsStatus status="success" text="Активна" variant="text" class="ml-2 mr-auto" />
      <CdsFunctionalButton icon="edit" aria-label="Редактировать" />
      <CdsButton size="sm" prepend-icon="download">Скачать</CdsButton>
    </CdsToolbar>

    <p class="text-content-secondary">Поставка серверного оборудования, приём заявок до 12 марта.</p>
  </CdsCard>
</template>

Шапка и подвал приложения

В CdsHeader тулбар собирает кнопку меню, название и профиль, в CdsFooter — копирайт. Фон задаётся частям макета, а тулбар наследует его вместе с контрастным цветом текста.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsAvatar,
  CdsFooter,
  CdsFunctionalButton,
  CdsHeader,
  CdsLayout,
  CdsMain,
  CdsPage,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
</script>

<template>
  <div class="h-[280px]">
    <CdsLayout container>
      <CdsHeader bordered bg-color="indigo">
        <CdsToolbar>
          <CdsFunctionalButton icon="menu" class="mr-2" aria-label="Открыть навигацию" />
          <CdsToolbarTitle>Портал закупок</CdsToolbarTitle>
          <CdsAvatar icon="user" />
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
        </CdsPage>
      </CdsMain>

      <CdsFooter bordered>
        <CdsToolbar>
          <CdsToolbarTitle>© 2026 Портал закупок</CdsToolbarTitle>
        </CdsToolbar>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

API

CdsToolbar

Пропсы

Имя	Тип	По умолчанию	Описание
bgColor	string | undefined	—	Цвет фона компонента
bordered	boolean | undefined	false	Показать нижнюю границу.
color	string | undefined	—	Цвет компонента
inset	boolean | undefined	false	Вложенный тулбар (отступ слева).
noGutter	"start" | "end" | undefined	—	Убрать отступ с одной стороны: start или end.
noGutters	boolean | undefined	false	Убрать все внутренние отступы.
theme	string | undefined	—	Тема компонента

Слоты

Имя	Тип	Описание
default	any	Содержимое тулбара.

CdsToolbarTitle

Пропсы

Имя	Тип	По умолчанию	Описание
shrink	boolean | undefined	false	Сжимать заголовок по содержимому вместо растягивания.

Слоты

Имя	Тип	Описание
default	any	Текст заголовка.