The parts of the layout are described on their own pages: CdsHeader, CdsDrawer, CdsMain, CdsPage, CdsFooter and CdsToolbar. You can assemble the frame with the mouse and copy the ready code in the layout builder.

Anatomy

CdsLayout is the root element of the application. The parts of the layout go inside it: the header, the drawers, CdsMain with CdsPage and the footer. The order in the template does not matter — the layout calculates the positions itself.

Storybook

Variations

The view scheme

The view prop describes the layout with three strings: top, middle, bottom. The letters are the parts of the layout: h — the header, f — the footer, l and r — the left and the right drawer, p — the page. The corner letters of the top and the bottom string settle the argument over the corners: hhh gives the whole width to the header, lhh gives the top left corner to the drawer.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsDrawer,
  CdsFooter,
  CdsHeader,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsRadio,
  CdsRadioGroup,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
import { ref } from 'vue';

const view = ref('hhh lpr fff');
</script>

<template>
  <div class="flex flex-col gap-4">
    <CdsRadioGroup v-model="view" direction="horizontal" hide-details>
      <CdsRadio value="hhh lpr fff" label="hhh lpr fff" />
      <CdsRadio value="lhh lpr lff" label="lhh lpr lff" />
      <CdsRadio value="lhh lpr fff" label="lhh lpr fff" />
    </CdsRadioGroup>

    <div class="h-[520px]">
      <CdsLayout container :view="view">
        <CdsHeader bordered>
          <CdsToolbar>
            <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
          </CdsToolbar>
        </CdsHeader>

        <CdsDrawer permanent border>
          <CdsList>
            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
            <CdsListItem title="Договоры" href="#" prepend-icon="file" />
            <CdsListItem title="Контрагенты" href="#" prepend-icon="company" />
          </CdsList>
        </CdsDrawer>

        <CdsMain>
          <CdsPage padding>
            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Схема <code>{{ view }}</code>
            </div>
          </CdsPage>
        </CdsMain>

        <CdsFooter bordered :height="40">
          <div class="flex h-[40px] items-center px-4 text-content-secondary">Подвал</div>
        </CdsFooter>
      </CdsLayout>
    </div>
  </div>
</template>

An uppercase letter gives the part position: fixed: HHH lpr fff nails the header to the window, hhh LPR fff nails both drawers. The default value is hhh lpr fff.

Container mode

By default the layout takes the whole page and controls its scrolling. The container prop locks it inside its parent: the layout gets its own scroll area, and the header and the footer keep their places inside it. This is a handy way to show the application in a preview, to embed it into somebody else's page or to build a working area of a fixed height.

Sandbox Storybook

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

<template>
  <div class="h-[520px] overflow-hidden rounded-200 border border-line-primary">
    <CdsLayout container>
      <CdsHeader elevated>
        <CdsToolbar>
          <CdsToolbarTitle>Шапка остаётся на месте</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding>
          <div class="flex flex-col gap-2">
            <div v-for="n in 12" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Блок {{ n }} — прокрутите область, страница за ней не двигается
            </div>
          </div>
        </CdsPage>
      </CdsMain>

      <CdsFooter elevated :height="40">
        <div class="flex h-[40px] items-center px-4 text-content-secondary">Подвал</div>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

Events

The layout watches its scroll area and shares what it sees: @scroll gives the position, the direction and the turning point, @resize gives the new sizes, @scroll-height gives the height of the content. The floating header and footer are built on these events, but you can use them for your own logic too — to load the next page of a list, for example.

Sandbox Storybook

<script setup lang="ts">
import { CdsLayout, CdsMain, CdsPage } from '@central-design-system/components';
import { ref } from 'vue';

const top = ref(0);
const direction = ref<'up' | 'down' | 'left' | 'right'>('down');
const size = ref({ width: 0, height: 0 });
</script>

<template>
  <div class="h-[520px]">
    <CdsLayout
      container
      @scroll="
        top = $event.position.top;
        direction = $event.direction;
      "
      @resize="size = $event"
    >
      <CdsMain>
        <CdsPage padding>
          <div class="mb-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Прокручено: {{ Math.round(top) }} px · направление: {{ direction === 'down' ? 'вниз' : 'вверх' }} · ширина
            содержимого: {{ Math.round(size.width) }} px
          </div>
          <div class="flex flex-col gap-2">
            <div v-for="n in 15" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-secondary">
              Блок {{ n }}
            </div>
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Guidelines

Storybook

Scenarios

Application shell

The typical set: a header with CdsToolbar, permanent navigation in CdsDrawer, CdsMain → CdsPage with the content and a footer. A button in the header toggles minified — the drawer shrinks to icons and gives the width to the content, and on hover it expands back.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsAvatar,
  CdsButton,
  CdsCard,
  CdsCardActions,
  CdsCardSubtitle,
  CdsCardText,
  CdsCardTitle,
  CdsDrawer,
  CdsFooter,
  CdsFunctionalButton,
  CdsHeader,
  CdsLayout,
  CdsLink,
  CdsList,
  CdsListGroup,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
import { ref } from 'vue';

const minified = ref(false);
const stats = [
  { title: 'Активные закупки', value: '128', hint: '+12 за неделю' },
  { title: 'Заявки на рассмотрении', value: '34', hint: '8 требуют действия' },
  { title: 'Поставщики', value: '512', hint: '+5 новых' },
  { title: 'Сообщения', value: '17', hint: '3 непрочитанных' }
];
</script>

<template>
  <div class="h-[640px]">
    <CdsLayout container>
      <CdsHeader bordered elevated :height="64">
        <CdsToolbar>
          <CdsFunctionalButton icon="menu" class="mr-2" aria-label="Свернуть навигацию" @click="minified = !minified" />
          <CdsAvatar icon="company" class="mr-2" />
          <CdsToolbarTitle>Портал закупок</CdsToolbarTitle>

          <CdsFunctionalButton icon="search" aria-label="Поиск" />
          <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
          <CdsAvatar icon="user" class="ml-2" />
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer permanent border :minified="minified">
        <CdsList>
          <CdsListItem title="Дашборд" href="#" prepend-icon="tree" active />
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
          <CdsListItem title="Заявки" href="#" prepend-icon="file" />
          <CdsListGroup>
            <template #activator="{ props }">
              <CdsListItem title="Контрагенты" prepend-icon="company" v-bind="props" />
            </template>
            <CdsListItem title="Поставщики" href="#" prepend-icon="user-group" />
            <CdsListItem title="Заказчики" href="#" prepend-icon="user" />
          </CdsListGroup>
          <CdsListItem title="Аналитика" href="#" prepend-icon="view-rows" />
          <CdsListItem title="Настройки" href="#" prepend-icon="settings" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <CdsToolbar class="mb-4 gap-4 rounded-200">
            <CdsToolbarTitle class="text-xl font-bold">Дашборд</CdsToolbarTitle>
            <CdsButton variant="soft" color="neutral" prepend-icon="adjust">Фильтры</CdsButton>
            <CdsButton prepend-icon="add">Создать закупку</CdsButton>
          </CdsToolbar>

          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <CdsCard v-for="stat in stats" :key="stat.title" class="p-4">
              <CdsCardSubtitle>{{ stat.title }}</CdsCardSubtitle>
              <CdsCardTitle class="text-2xl font-bold">{{ stat.value }}</CdsCardTitle>
              <CdsCardText class="text-content-secondary">{{ stat.hint }}</CdsCardText>
            </CdsCard>
          </div>

          <CdsCard class="mt-4 p-4">
            <CdsCardTitle>Последние закупки</CdsCardTitle>
            <CdsCardText>
              Прокрутите страницу, чтобы увидеть, как шапка и подвал остаются на месте, а содержимое страницы скроллится
              внутри макета.
            </CdsCardText>
            <CdsList>
              <CdsListItem
                v-for="n in 12"
                :key="n"
                :title="'Закупка №' + (1000 + n)"
                :subtitle="'Поставщик ООО «Компания ' + n + '»'"
                href="#"
                prepend-icon="shopping-cart"
                append-icon="chevron-right"
              />
            </CdsList>
            <CdsCardActions class="justify-end">
              <CdsButton variant="soft" color="neutral">Показать все</CdsButton>
            </CdsCardActions>
          </CdsCard>
        </CdsPage>
      </CdsMain>

      <CdsFooter bordered :height="48">
        <div class="flex h-[48px] items-center justify-between px-4">
          <span class="text-content-secondary">© 2026 Портал закупок</span>
          <span class="flex items-center gap-4">
            <CdsLink href="#">Помощь</CdsLink>
            <CdsLink href="#">Конфиденциальность</CdsLink>
          </span>
        </div>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

A header that hides on scroll

On long lists the space is worth more than the navigation. The reveal prop of the header and the footer hides them when scrolling down and brings them back when scrolling up; reveal-offset sets the zone near the top of the list where the header stays in place.

Sandbox Storybook

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

const revealed = ref(true);
</script>

<template>
  <div class="h-[500px]">
    <CdsLayout container>
      <CdsHeader reveal elevated :reveal-offset="80" @reveal="revealed = $event">
        <CdsToolbar>
          <CdsToolbarTitle>Каталог поставщиков</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding>
          <div class="mb-2 text-content-secondary">
            Шапка {{ revealed ? 'видна' : 'скрыта' }} — прокрутите вниз, чтобы освободить место списку, и вверх, чтобы
            вернуть её.
          </div>
          <div class="flex flex-col gap-2">
            <div v-for="n in 20" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Поставщик №{{ n }}
            </div>
          </div>
        </CdsPage>
      </CdsMain>

      <CdsFooter reveal elevated :height="40">
        <div class="flex h-[40px] items-center px-4 text-content-secondary">Найдено 20 поставщиков</div>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

Working area with filters

The lhh lpr fff scheme gives the top left corner to the navigation — it starts from the very top, and the header takes the remaining width. The right drawer with temporary slides over the content on a button click and closes on a click on the overlay, so it takes no place in the layout.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCheckbox,
  CdsDrawer,
  CdsHeader,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
import { ref } from 'vue';

const filters = ref(false);
const statuses = ref<string[]>(['active']);
</script>

<template>
  <div class="h-[520px]">
    <CdsLayout container view="lhh lpr fff">
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
          <CdsButton variant="soft" color="neutral" prepend-icon="adjust" @click="filters = !filters"
            >Фильтры</CdsButton
          >
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer permanent border>
        <CdsList>
          <CdsListItem title="Все закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Избранное" href="#" prepend-icon="star" />
          <CdsListItem title="Архив" href="#" prepend-icon="archive" />
        </CdsList>
      </CdsDrawer>

      <CdsDrawer v-model="filters" right temporary border>
        <template #prepend>
          <div class="font-bold text-content-primary">Фильтры</div>
        </template>

        <div class="flex flex-col gap-1">
          <CdsCheckbox v-model="statuses" value="active" label="Активные" hide-details />
          <CdsCheckbox v-model="statuses" value="draft" label="Черновики" hide-details />
          <CdsCheckbox v-model="statuses" value="done" label="Завершённые" hide-details />
        </div>

        <template #append>
          <CdsButton block @click="filters = false">Применить</CdsButton>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="flex flex-col gap-2">
            <div v-for="n in 8" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Закупка №{{ 2400 + n }}
            </div>
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

API

Props

Name	Type	Default	Description
container	boolean | undefined	false	Container mode: the layout scrolls inside itself instead of scrolling the page.
theme	string | undefined	—	Component theme
view	string | undefined	'hhh lpr fff'	Layout scheme of three strings: top (header), middle (left-page-right), bottom (footer). For example 'hhh lpr fff'.

Events

Name	Type	Description
resize	[contentRect: Pick<DOMRectReadOnly, "width" | "height">]	The size of the layout area has changed.
scroll	[info: ScrollObserver]	The layout area has been scrolled.
scrollHeight	[height: number]	The height of the scrollable content has changed.

Slots

Name	Type	Description
default	any	Content of the layout: CdsHeader, CdsDrawer, CdsMain, CdsFooter.

Exposed

Name	Type	Description
animate	() => void	Turns on the rebuild animation of the layout for the duration of the next size update.
containerHeight	number	Height of the content area without the header and the footer, in pixels.
footer	LayoutPart	Size and offset of the layout footer.
header	LayoutPart	Size and offset of the layout header.
height	number	Full height of the layout in pixels.
instances	Record<string, unknown>	Components registered in the layout by their identifiers — the header, the footer, the drawers, the content.
isContainer	boolean	Whether the layout is limited in width by a container (container) instead of stretching across the whole screen.
left	LayoutPart	Size and offset of the left drawer of the layout.
right	LayoutPart	Size and offset of the right drawer of the layout.
rootRef	HTMLElement | undefined	Ref to the root DOM element of the layout.
rows	{ top: string[]; middle: string[]; bottom: string[]; }	Identifiers of the components distributed across the rows of the layout: top, middle and bottom.
scroll	ScrollObserver	Scroll state of the layout: position, direction and delta.
scrollbarWidth	number	Width of the system scrollbar in pixels — taken into account when the scroll is locked.
totalWidth	number	Full width of the layout in pixels.
update	(part: "left" | "right" | "footer" | "header", prop: keyof LayoutPart, value: number | boolean) => void	Updates the size, the offset or the space reservation for a part of the layout.