For a list of sections inside the drawer take CdsList; for navigating the subsections of a single page take CdsTabs. The drawer is a part of the CdsLayout frame, but unlike the other parts it also works on its own: with the fixed prop it sticks to the window without a layout.

Anatomy

The drawer consists of a scrollable navigation list and two pinned areas: prepend on top — for a logo or a profile, append at the bottom — for the sign-out and utility links. The border prop draws borders between the areas.

Storybook

Variations

Permanent drawer

The permanent prop keeps the drawer on the screen at all times. Without it the drawer hides on screens narrower than 1056 px — the content gets the whole width, and the navigation is opened by a button.

Sandbox Storybook

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

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer permanent border>
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Панель стоит в потоке макета: контент начинается сразу за ней и никогда не оказывается под панелью.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Collapsible drawer

A regular drawer follows v-model at any screen width. On a wide screen it sits in the layout, and when closed it gives its place back to the content. On a narrow screen the same drawer slides out over the content. When the screen crosses 1056 px, the drawer closes and opens back on its own; disable-resize-watcher turns this sync off. The width prop sets the width in pixels, and the layout shifts the content by exactly that much.

Sandbox Storybook

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

const open = ref<boolean | null>(null);
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsFunctionalButton
            icon="menu"
            class="mr-2"
            :aria-label="open ? 'Скрыть навигацию' : 'Показать навигацию'"
            @click="open = !open"
          />
          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer v-model="open" border :width="280">
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            На широком экране панель стоит в макете и сдвигает контент. Скройте её кнопкой в шапке — контент займёт всю
            ширину. На узком экране та же панель выезжает поверх контента.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Temporary drawer

The temporary prop turns the drawer into a sliding one: it takes no place in the layout, opens through v-model and closes on a click on the overlay or on Esc. The @opened and @closed events report the change of state.

Sandbox Storybook

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

const open = ref(false);
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer v-model="open" temporary border>
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <CdsButton prepend-icon="menu" @click="open = true">Открыть навигацию</CdsButton>
          <div class="mt-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Временная панель выезжает поверх контента и закрывается кликом по затемнению или клавишей Esc.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

On touch screens a sliding drawer can be pulled out with a swipe from the screen edge and put away with a swipe back. The touchless prop turns the gestures off.

Without the scrim

The scrim prop controls the backdrop under a sliding drawer. false removes it: the content under the drawer stays clickable, but a click outside no longer closes the drawer, so provide your own button for that. A string instead of true sets the backdrop color; pass it with transparency, for example rgb(0 0 0 / 0.3), or the content under the drawer is hidden completely.

Sandbox Storybook

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

const open = ref(false);
const clicks = ref(0);
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer v-model="open" temporary right border :scrim="false">
        <CdsList>
          <CdsListItem title="Фильтр: активные" prepend-icon="adjust" />
          <CdsListItem title="Фильтр: архивные" prepend-icon="archive" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="flex flex-wrap gap-2">
            <CdsButton prepend-icon="adjust" @click="open = !open">
              {{ open ? 'Скрыть фильтры' : 'Показать фильтры' }}
            </CdsButton>
            <CdsButton variant="soft" color="brand" @click="clicks++">Кликов по контенту: {{ clicks }}</CdsButton>
          </div>
          <div class="mt-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Панель без затемнения: контент под ней не блокируется, поэтому закрывать её нужно своей кнопкой.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Protection from an accidental close

The persistent prop keeps a click on the scrim and the Esc key from closing the drawer: only v-model closes it. It suits a drawer with a form, where a stray click outside would wipe the input.

Sandbox Storybook

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

const open = ref(false);
const title = ref('');
const comment = ref('');
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer v-model="open" temporary right persistent border fixed-slots :width="360">
        <template #prepend>
          <span class="text-base font-medium text-content-primary">Новая заявка</span>
        </template>

        <div class="flex flex-col gap-2 px-3">
          <CdsTextInput v-model="title" label="Название" />
          <CdsTextArea v-model="comment" label="Комментарий" />
        </div>

        <template #append>
          <div class="flex justify-end gap-2">
            <CdsButton variant="soft" color="brand" @click="open = false">Отмена</CdsButton>
            <CdsButton variant="solid" color="brand" @click="open = false">Сохранить</CdsButton>
          </div>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <CdsButton prepend-icon="add" @click="open = true">Создать заявку</CdsButton>
          <div class="mt-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Клик по затемнению и Esc не закрывают панель с формой — только кнопки внутри, поэтому ввод не теряется.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Minified drawer

The minified prop shrinks the drawer down to icons and gives the width back to the content. On hover the drawer expands over the page without pushing it, so the section labels stay reachable.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col gap-4">
    <CdsToggle v-model="minified" label="Свернуть до иконок" hide-details />

    <div class="h-[480px]">
      <CdsLayout container>
        <CdsDrawer permanent border :minified="minified">
          <CdsList>
            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
            <CdsListItem title="Договоры" href="#" prepend-icon="file" />
            <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
          </CdsList>
        </CdsDrawer>

        <CdsMain>
          <CdsPage padding>
            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Наведите курсор на свёрнутую панель — она развернётся поверх контента, не сдвигая его.
            </div>
          </CdsPage>
        </CdsMain>
      </CdsLayout>
    </div>
  </div>
</template>

Position

The right prop moves the drawer to the right edge. The application navigation usually lives on the left, and the context of the current record — history, comments, filters — on the right. Both drawers can work in the same layout at once.

Sandbox Storybook

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

<template>
  <div class="h-[480px]">
    <CdsLayout container>
      <CdsDrawer permanent border>
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
        </CdsList>
      </CdsDrawer>

      <CdsDrawer permanent right border>
        <CdsList>
          <CdsListItem title="История изменений" href="#" prepend-icon="time" />
          <CdsListItem title="Комментарии" href="#" prepend-icon="message" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Слева навигация, справа контекст записи — макет резервирует место под обе панели.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Color

The bg-color prop paints the background of the drawer with a palette alias, color paints the text and the icons inside. A dark drawer next to light content emphasizes the border of the working area.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsDrawer,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsRadio,
  CdsRadioGroup
} 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="teal" label="teal" />
    </CdsRadioGroup>

    <div class="h-[480px]">
      <CdsLayout container>
        <CdsDrawer permanent :bg-color="bgColor === 'default' ? undefined : bgColor">
          <CdsList>
            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
            <CdsListItem title="Договоры" href="#" prepend-icon="file" />
            <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
          </CdsList>
        </CdsDrawer>

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

Background image

The image prop puts an image from a URL under the drawer content, and the image slot takes custom background markup. Color the text on top with the color prop so it stays readable.

Sandbox Storybook

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

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer permanent image="/images/temp/space.webp" color="content-on-dark">
        <CdsList bg-color="transparent">
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Свойство <code>image</code> кладёт картинку под содержимое панели. Для своей разметки фона — градиента или
            видео — есть слот <code>image</code>.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Slots

Slot	Description
prepend	Pinned area on top: logo, profile
default	Navigation items
append	Pinned area at the bottom: sign-out, utility links
image	Background under the drawer content

The fixed-slots prop keeps prepend and append in place and gives the scroll to the list of sections only — long navigation no longer pushes the sign-out button past the edge.

Sandbox Storybook

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

<template>
  <div class="h-[380px]">
    <CdsLayout container>
      <CdsDrawer permanent border fixed-slots>
        <template #prepend>
          <div class="flex items-center gap-2">
            <CdsAvatar icon="company" />
            <span class="font-bold text-content-primary">Портал закупок</span>
          </div>
        </template>

        <CdsList>
          <CdsListItem v-for="n in 12" :key="n" :title="'Раздел ' + n" href="#" prepend-icon="file" />
        </CdsList>

        <template #append>
          <CdsButton variant="soft" color="neutral" block prepend-icon="logout">Выйти</CdsButton>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Список разделов скроллится, а шапка и кнопка выхода остаются на месте.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Guidelines

Storybook

Scenarios

Application navigation

A logo in prepend, the sections in a CdsList with active on the current one, a sign-out button in append. The lhh lpr fff layout scheme gives the top left corner to the drawer, so it starts from the very top and reads as the backbone of the application.

Sandbox Storybook

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

const sections = [
  { key: 'purchases', title: 'Закупки', icon: 'shopping-cart' },
  { key: 'contracts', title: 'Договоры', icon: 'file' },
  { key: 'reports', title: 'Отчёты', icon: 'view-rows' }
];
const active = ref('purchases');
</script>

<template>
  <div class="h-[560px]">
    <CdsLayout container view="lhh lpr fff">
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>{{ sections.find((section) => section.key === active)?.title }}</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer permanent border fixed-slots>
        <template #prepend>
          <div class="flex items-center gap-2">
            <CdsAvatar icon="company" />
            <span class="font-bold text-content-primary">Портал закупок</span>
          </div>
        </template>

        <CdsList>
          <CdsListItem
            v-for="section in sections"
            :key="section.key"
            :title="section.title"
            :prepend-icon="section.icon"
            :active="active === section.key"
            @click="active = section.key"
          />
          <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>
        </CdsList>

        <template #append>
          <CdsButton variant="soft" color="neutral" block prepend-icon="logout">Выйти</CdsButton>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Раздел «{{ sections.find((section) => section.key === active)?.title }}»
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Notification panel

A right drawer with temporary opens from an icon in the header, shows the list and closes on a click on the overlay. It takes no place in the layout, so the main content is not rebuilt when it opens.

Sandbox Storybook

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

const open = ref(false);
const items = ref([
  { id: 1, title: 'Закупка №2401 опубликована', time: '5 минут назад' },
  { id: 2, title: 'Новое предложение от ООО «Вектор»', time: '2 часа назад' },
  { id: 3, title: 'Договор №118 подписан', time: 'вчера' }
]);
</script>

<template>
  <div class="h-[520px]">
    <CdsLayout container>
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
          <CdsBadge :content="items.length" :model-value="items.length > 0">
            <CdsFunctionalButton icon="notification" aria-label="Уведомления" @click="open = true" />
          </CdsBadge>
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer v-model="open" right temporary border fixed-slots>
        <template #prepend>
          <div class="font-bold text-content-primary">Уведомления</div>
        </template>

        <CdsList>
          <CdsListItem v-for="item in items" :key="item.id" :title="item.title" :subtitle="item.time" href="#" />
        </CdsList>

        <template #append>
          <CdsButton variant="soft" color="neutral" block @click="items = []">Отметить все прочитанными</CdsButton>
        </template>
      </CdsDrawer>

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

API

Props

Name	Type	Default	Description
bgColor	string | undefined	—	Background color of the component
border	boolean | undefined	false	Adds borders between the sections (prepend/append).
captureFocus	boolean | undefined	true	Returns the focus back into the content if it has left it — for example on Tab from the end of the page. A mouse click does not steal the focus.
color	string | undefined	—	Component color
disableResizeWatcher	boolean | undefined	false	Does not sync v-model with the screen width. By default a regular drawer closes when the screen narrows and it becomes a sliding one, and opens back on a wide screen.
fixed	boolean | undefined	false	Applies position: fixed.
fixedSlots	boolean | undefined	false	Uses an inner scroll for the content section.
height	string | number | undefined	—	Component height
image	string | undefined	—	Background image of the drawer (URL). The image slot is available for custom background markup.
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minified	boolean | undefined	false	Minified look (icons only) until the mouse hovers over it.
minWidth	string | number | undefined	—	Minimum component width
modelValue	boolean | null | undefined	null	Shows/hides the drawer (v-model). Without it a regular drawer is open on a wide screen, and a sliding one is closed.
permanent	boolean | undefined	false	Always visible, regardless of the screen size.
persistent	boolean | undefined	false	A click on the scrim and the Esc key do not close the drawer, only v-model does. For drawers with a form where an accidental close loses the input.
retainFocus	boolean | undefined	true	Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back.
right	boolean | undefined	false	Positions the drawer on the right.
scrim	string | boolean | undefined	true	Backdrop under the drawer while it covers the content. false removes it entirely: the content stays clickable and the drawer closes only with Esc or through v-model; a string sets its color.
tag	string | JSXComponent<any> | undefined	'aside'	Custom HTML tag or component to render
temporary	boolean | undefined	false	Temporary drawer: slides out over the content at any screen width, opens through v-model and closes on the overlay. On a narrow screen any non-permanent drawer behaves this way.
theme	string | undefined	—	Component theme
touchless	boolean | undefined	false	Disables gestures: a sliding drawer neither opens with a swipe from the screen edge nor closes with a swipe.
width	string | number | undefined	240	The drawer width, px. It also goes into the layout: the content shifts by exactly this width.

Events

Name	Type	Description
closed	[value: boolean]	The drawer has closed.
opened	[value: boolean]	The drawer has opened.
update:modelValue	[value: boolean]	The v-model value has changed.

Slots

Name	Type	Description
append	any	Content after the navigation.
default	any	Navigation items (CdsList).
image	{ image: string | undefined; }	Custom drawer background instead of CdsImage from the image prop; stretches under the content.
prepend	any	Content before the navigation.

Exposed

Name	Type	Description
drawerRef	HTMLElement | undefined	Ref to the root DOM element of the drawer.