Для выбора значения в форме возьмите CdsSelect — оно останется видимым и попадёт в отправку. Короткая подсказка при наведении — CdsTooltip, а диалог, требующий ответа, — CdsModal. Содержимое меню обычно собирают из CdsList.

Внутри меню работает CdsOverlay: он считает координаты, переворачивает панель, когда до края экрана не хватает места, и пересчитывает позицию при скролле. Поэтому пропсы позиционирования и открытия у меню общие с оверлеем.

Вариации

Активаторы

Меню открывает элемент-активатор — задать его можно тремя способами:

1. Через слот activator — пропсы из слота (v-bind="props") вешают на элемент обработчики и aria-атрибуты. Способ по умолчанию: активатор виден рядом с меню.
2. Через родителя — activator="parent" берёт элемент, внутри которого лежит CdsMenu. Удобно, когда активатор уже собран и его не хочется оборачивать.
3. Через селектор — activator="#id" связывает меню с любым элементом страницы, даже далёким по разметке.

Sandbox Storybook

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

const items = [
  { title: 'Скачать', value: 'download' },
  { title: 'Дублировать', value: 'duplicate' },
  { title: 'Переименовать', value: 'rename' }
];
</script>

<template>
  <div class="m-auto flex flex-wrap items-center justify-center gap-2">
    <CdsMenu>
      <template #activator="{ props }">
        <CdsButton v-bind="props">Активатор в слоте</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>

    <CdsButton>
      Родительский элемент

      <CdsMenu activator="parent">
        <CdsList :items="items" />
      </CdsMenu>
    </CdsButton>

    <CdsButton id="menu-activator">Соседний элемент</CdsButton>

    <CdsMenu activator="#menu-activator">
      <CdsList :items="items" />
    </CdsMenu>
  </div>
</template>

Способ открытия

По умолчанию меню открывается кликом. Проп open-on-hover переводит его на наведение — так ведут себя навигационные меню; клик тогда панель не открывает. Задержки open-delay и close-delay (300 и 250 мс) не дают меню мигать, когда курсор проходит мимо. Вместе с open-on-hover включается и открытие по фокусу — отключите его :open-on-focus="false", если меню должно реагировать только на мышь.

Sandbox Storybook

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

const items = [
  { title: 'Профиль', value: 'profile' },
  { title: 'Уведомления', value: 'notifications' },
  { title: 'Выйти', value: 'logout' }
];
</script>

<template>
  <div class="m-auto flex flex-wrap items-center justify-center gap-2">
    <CdsMenu open-on-hover>
      <template #activator="{ props }">
        <CdsButton v-bind="props">Наведите курсор</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>

    <CdsMenu open-on-hover :open-delay="0" :close-delay="0">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="brand">Без задержек</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>

    <CdsMenu open-on-hover :open-on-focus="false">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="brand">Только наведение</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>
  </div>
</template>

Положение

Проп location задаёт, с какой стороны от активатора появится меню: bottom по умолчанию, top, end, bottom end — сторона и выравнивание. Если места не хватает, меню само перевернётся к противоположному краю. Расстояние до активатора настраивает offset, а viewport-margin — минимальный отступ от края экрана.

Sandbox Storybook

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

const items = [
  { title: 'Скачать', value: 'download' },
  { title: 'Дублировать', value: 'duplicate' },
  { title: 'Переименовать', value: 'rename' }
];

const locations = ['bottom', 'top', 'end', 'bottom end'] as const;
</script>

<template>
  <div class="m-auto flex flex-wrap items-center justify-center gap-2">
    <CdsMenu v-for="location in locations" :key="location" :location="location">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="neutral">{{ location }}</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>

    <CdsMenu :offset="16">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="neutral">offset 16</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>
  </div>
</template>

Размеры

Ширина меню равна ширине содержимого. Пропсы min-width, max-width и max-height задают рамки: минимальная ширина не даёт панели схлопнуться на коротких пунктах, а ограниченная высота включает прокрутку вместо меню во весь экран.

Sandbox Storybook

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

const items = Array.from({ length: 12 }, (_, index) => ({
  title: `Организация № ${index + 1}`,
  value: index + 1
}));
</script>

<template>
  <div class="m-auto flex flex-wrap items-center justify-center gap-2">
    <CdsMenu :min-width="280">
      <template #activator="{ props }">
        <CdsButton v-bind="props">Минимальная ширина</CdsButton>
      </template>

      <CdsList :items="items.slice(0, 3)" />
    </CdsMenu>

    <CdsMenu :max-height="220">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="brand">Ограниченная высота</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>
  </div>
</template>

Закрытие

Меню закрывается кликом по содержимому, кликом мимо и клавишей Esc. Проп :close-on-content-click="false" оставляет панель открытой — это нужно, когда внутри чекбоксы, поля или несколько шагов подряд. Проп persistent игнорирует клик мимо и Esc: тогда закрыть меню можно только своей кнопкой через v-model.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCheckbox, CdsList, CdsMenu, CdsSurface } from '@central-design-system/components';
import { ref } from 'vue';

const items = [
  { title: 'Скачать', value: 'download' },
  { title: 'Дублировать', value: 'duplicate' },
  { title: 'Переименовать', value: 'rename' }
];

const columns = ref(['name']);
const persistent = ref(false);
</script>

<template>
  <div class="m-auto flex flex-wrap items-center justify-center gap-2">
    <CdsMenu>
      <template #activator="{ props }">
        <CdsButton v-bind="props">Закроется по клику</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>

    <CdsMenu :close-on-content-click="false">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="brand">Останется открытым</CdsButton>
      </template>

      <CdsSurface class="flex w-[220px] flex-col gap-1">
        <CdsCheckbox v-model="columns" value="name" label="Название" hide-details />
        <CdsCheckbox v-model="columns" value="date" label="Дата" hide-details />
        <CdsCheckbox v-model="columns" value="status" label="Статус" hide-details />
      </CdsSurface>
    </CdsMenu>

    <CdsMenu v-model="persistent" persistent :close-on-content-click="false">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="brand">Только своей кнопкой</CdsButton>
      </template>

      <CdsSurface class="flex w-[240px] flex-col gap-1 p-2">
        <span class="text-100 text-content-secondary">Клик мимо меню его не закроет.</span>

        <CdsButton size="sm" variant="soft" color="neutral" @click="persistent = false">Закрыть</CdsButton>
      </CdsSurface>
    </CdsMenu>
  </div>
</template>

Вложенные меню

Меню можно вкладывать друг в друга: каждый пункт списка становится активатором (activator="parent") для дочернего CdsMenu с пропом submenu — он смещает панель вбок и переводит навигацию на стрелки влево-вправо. Раскрытие по наведению включает open-on-hover, а :open-on-focus="false" не даёт подменю раскрываться при переходе по табу.

Sandbox Storybook

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

const sections = [
  { title: 'Закупки', children: ['Черновики', 'Опубликованные', 'Завершённые'] },
  { title: 'Договоры', children: ['На согласовании', 'Подписанные', 'Архив'] },
  { title: 'Отчёты', children: ['По поставщикам', 'По срокам', 'По суммам'] }
];

const periods = ['За неделю', 'За месяц', 'За квартал'];
</script>

<template>
  <div class="m-auto flex justify-center">
    <CdsButton>
      Открыть меню

      <CdsMenu activator="parent">
        <CdsList>
          <CdsListItem v-for="section in sections" :key="section.title" link :title="section.title">
            <template #append>
              <CdsIcon name="chevron-right" size="xs" />
            </template>

            <CdsMenu activator="parent" submenu open-on-hover :open-on-focus="false">
              <CdsList>
                <CdsListItem v-for="child in section.children" :key="child" link :title="child">
                  <template #append>
                    <CdsIcon name="chevron-right" size="xs" />
                  </template>

                  <CdsMenu activator="parent" submenu open-on-hover :open-on-focus="false">
                    <CdsList>
                      <CdsListItem v-for="period in periods" :key="period" link :title="period" />
                    </CdsList>
                  </CdsMenu>
                </CdsListItem>
              </CdsList>
            </CdsMenu>
          </CdsListItem>
        </CdsList>
      </CdsMenu>
    </CdsButton>
  </div>
</template>

Анимация

Проп transition меняет анимацию появления панели.

Sandbox Storybook

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

const items = [
  { title: 'Скачать', value: 'download' },
  { title: 'Дублировать', value: 'duplicate' },
  { title: 'Переименовать', value: 'rename' }
];

const transitions = ['fade-transition', 'scale-transition', 'slide-transition-y', 'slide-transition-x'];
</script>

<template>
  <div class="m-auto flex flex-wrap items-center justify-center gap-4">
    <CdsMenu v-for="transition in transitions" :key="transition" :transition="transition">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="neutral">{{ transition }}</CdsButton>
      </template>

      <CdsList :items="items" />
    </CdsMenu>
  </div>
</template>

Слоты

Слот	Описание
activator	Элемент, открывающий меню. Пропсы слота (props) вешают на него обработчики
default	Содержимое панели. Обычно CdsList, CdsCard или CdsSurface

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

Storybook

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

Действия над записью

Редкие действия над строкой таблицы или карточкой собирают в меню за кнопкой «⋮»: строка остаётся чистой, а действия не соревнуются с главной кнопкой. location="bottom end" прижимает панель к правому краю активатора, slim у списка убирает лишние отступы, а aria-label называет, к какой записи относится меню.

Sandbox Storybook

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

const documents = [
  { id: 1, title: 'Договор поставки № 42' },
  { id: 2, title: 'Счёт на оплату № 5512' },
  { id: 3, title: 'Акт сверки за март' }
];

const actions = [
  { title: 'Скачать', icon: 'download' },
  { title: 'Дублировать', icon: 'copy' },
  { title: 'Переименовать', icon: 'edit' }
];

const lastAction = ref('');
</script>

<template>
  <div class="m-auto flex w-[300px] flex-col gap-1">
    <div v-for="doc in documents" :key="doc.id" class="flex items-center justify-between gap-2">
      <span class="text-100">{{ doc.title }}</span>

      <CdsMenu location="bottom end">
        <template #activator="{ props }">
          <CdsButton
            v-bind="props"
            size="sm"
            variant="soft"
            color="neutral"
            icon="more-vertical"
            :aria-label="`Действия: ${doc.title}`"
          />
        </template>

        <CdsList slim>
          <CdsListItem
            v-for="action in actions"
            :key="action.title"
            link
            :title="action.title"
            :prepend-icon="action.icon"
            @click="lastAction = `${action.title}: ${doc.title}`"
          />

          <CdsListItemDivider />

          <CdsListItem link title="Удалить" prepend-icon="delete" @click="lastAction = `Удалить: ${doc.title}`" />
        </CdsList>
      </CdsMenu>
    </div>

    <p class="text-100 text-content-secondary">{{ lastAction || 'Выберите действие в меню строки' }}</p>
  </div>
</template>

Контекстное меню

Меню можно открыть в точке клика: обработчик contextmenu кладёт координаты курсора в target, а показом управляет v-model — активатор здесь не нужен. Новый клик двигает открытую панель на новое место. Анимация по умолчанию рассчитана на активатор-элемент, поэтому меню по координатам задайте css-анимацию — например, transition="scale-transition".

Sandbox Storybook

<script setup lang="ts">
import { CdsList, CdsListItem, CdsMenu, CdsSurface } from '@central-design-system/components';
import { ref } from 'vue';

const isOpen = ref(false);
const coordinates = ref<[number, number]>([0, 0]);
const lastAction = ref('');

const openContextMenu = (event: MouseEvent) => {
  coordinates.value = [event.clientX, event.clientY];
  isOpen.value = true;
};
</script>

<template>
  <div class="m-auto flex w-[380px] flex-col gap-1">
    <CdsSurface
      class="flex h-[140px] cursor-context-menu items-center justify-center rounded border border-dashed"
      @contextmenu.prevent="openContextMenu"
    >
      <span class="text-100 text-content-secondary">Кликните правой кнопкой мыши</span>
    </CdsSurface>

    <CdsMenu v-model="isOpen" :target="coordinates" transition="scale-transition">
      <CdsList slim>
        <CdsListItem link title="Вырезать" prepend-icon="copy" @click="lastAction = 'Вырезать'" />
        <CdsListItem link title="Копировать" prepend-icon="copy" @click="lastAction = 'Копировать'" />
        <CdsListItem link title="Вставить" prepend-icon="paste" @click="lastAction = 'Вставить'" />
      </CdsList>
    </CdsMenu>

    <p class="text-100 text-content-secondary">{{ lastAction || 'Действие не выбрано' }}</p>
  </div>
</template>

Меню в шапке

В шапке приложения меню решает две задачи: раскрывает разделы навигации и собирает всё про аккаунт за аватаром. Активатор пользовательского меню — CdsAvatar в кнопке с aria-label, location="bottom end" прижимает панель к правому краю, а min-width не даёт ей прыгать по ширине. Первый пункт списка показывает, чей это аккаунт, CdsListItemDivider отбивает разделы от выхода.

Sandbox Storybook

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

const sections = [
  { title: 'Закупки', items: ['Мои закупки', 'Черновики', 'Архив'] },
  { title: 'Договоры', items: ['Действующие', 'На согласовании'] }
];

const opened = ref('');
</script>

<template>
  <div class="m-auto h-[220px] w-full max-w-[560px]">
    <CdsLayout container>
      <CdsHeader elevated>
        <div class="flex h-[56px] items-center gap-2 px-4">
          <span class="text-100 font-bold text-content-primary">B2B-Center</span>

          <nav class="flex items-center gap-1">
            <CdsMenu v-for="section in sections" :key="section.title" :min-width="180">
              <template #activator="{ props }">
                <CdsButton
                  v-bind="props"
                  size="sm"
                  variant="soft"
                  color="neutral"
                  append-icon="chevron-down"
                  :text="section.title"
                />
              </template>

              <CdsList slim>
                <CdsListItem
                  v-for="item in section.items"
                  :key="item"
                  link
                  :title="item"
                  @click="opened = `${section.title} → ${item}`"
                />
              </CdsList>
            </CdsMenu>
          </nav>

          <div class="ml-auto">
            <CdsMenu location="bottom end" :min-width="240">
              <template #activator="{ props }">
                <CdsButton v-bind="props" variant="soft" color="neutral" aria-label="Меню пользователя">
                  <CdsAvatar size="sm" text="ИП" />
                </CdsButton>
              </template>

              <CdsList slim>
                <CdsListItem lines="two" title="Иван Петров" subtitle="i.petrov@example.com">
                  <template #prepend>
                    <CdsAvatar size="sm" text="ИП" start />
                  </template>
                </CdsListItem>

                <CdsListItemDivider />

                <CdsListItem link title="Профиль" prepend-icon="user" @click="opened = 'Профиль'" />
                <CdsListItem link title="Организация" prepend-icon="company" @click="opened = 'Организация'" />
                <CdsListItem link title="Настройки" prepend-icon="settings" @click="opened = 'Настройки'" />

                <CdsListItemDivider />

                <CdsListItem link title="Выйти" prepend-icon="logout" @click="opened = 'Выход из аккаунта'" />
              </CdsList>
            </CdsMenu>
          </div>
        </div>
      </CdsHeader>

      <CdsMain>
        <p class="p-4 text-100 text-content-secondary">{{ opened || 'Выберите пункт в меню шапки' }}</p>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Фильтр с несколькими значениями

Когда внутри меню выбирают несколько значений, панель не должна закрываться на первом же клике: :close-on-content-click="false" оставляет её открытой, а v-model даёт закрыть меню кнопкой «Применить». Выбор копится в черновике и применяется целиком — до нажатия кнопки список записей не меняется.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsCheckbox, CdsMenu, CdsSurface } from '@central-design-system/components';
import { computed, ref, watch } from 'vue';

const statuses = [
  { title: 'Черновик', value: 'draft' },
  { title: 'На согласовании', value: 'review' },
  { title: 'Подписан', value: 'signed' },
  { title: 'Отклонён', value: 'rejected' }
];

const isOpen = ref(false);
const draft = ref<string[]>(['review']);
const applied = ref<string[]>(['review']);

const appliedTitles = computed(() =>
  statuses.filter((status) => applied.value.includes(status.value)).map((status) => status.title)
);

const apply = () => {
  applied.value = [...draft.value];
  isOpen.value = false;
};

const reset = () => {
  draft.value = [];
};

watch(isOpen, (value) => {
  if (value) draft.value = [...applied.value];
});
</script>

<template>
  <div class="m-auto flex w-[380px] flex-col items-center gap-1">
    <CdsMenu v-model="isOpen" :close-on-content-click="false" :min-width="240">
      <template #activator="{ props }">
        <CdsButton v-bind="props" variant="soft" color="brand" prepend-icon="adjust">
          Статус<template v-if="applied.length">: {{ applied.length }}</template>
        </CdsButton>
      </template>

      <CdsSurface class="flex flex-col gap-2 p-2">
        <CdsCheckbox
          v-for="status in statuses"
          :key="status.value"
          v-model="draft"
          :value="status.value"
          :label="status.title"
          hide-details
        />

        <div class="flex justify-between gap-2">
          <CdsButton size="sm" variant="soft" color="neutral" text="Сбросить" @click="reset" />
          <CdsButton size="sm" text="Применить" @click="apply" />
        </div>
      </CdsSurface>
    </CdsMenu>

    <p class="text-100 text-content-secondary">
      {{ appliedTitles.length ? `Показаны: ${appliedTitles.join(', ')}` : 'Фильтр не выбран' }}
    </p>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
activator	(string & {}) | Element | "parent" | ComponentPublicInstance | undefined	—	Элемент, который будет активировать компонент
activatorProps	Record<string, any> | undefined	{}	Свойства для элемента активатора
attach	string | boolean | Element | undefined	—	Указывает, в какой элемент DOM следует переместить содержимое overlay. Может быть прямой ссылкой на элемент, строкой querySelector или значением true для отключения перемещения. По умолчанию используется элемент body. Как правило, не рекомендуется изменять это свойство, за исключением крайних случаев: алгоритм позиционирования по умолчанию должен справляться с большинством сценариев лучше, чем это возможно без перемещения, и может возникнуть непредвиденное поведение, если меню окажется дочерним элементом своего активатора.
captureFocus	boolean | undefined	true	Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает.
closeDelay	string | number | undefined	250	Время ожидания в миллисекундах перед закрытием компонента. Работает только с параметром open-on-hover.
closeOnBack	boolean | undefined	true	Закрывает содержимое оверлея при нажатии кнопки «Назад» в браузере или вызове $router.back(), отменяя исходную навигацию. persistent оверлеи отменяют навигацию и анимируются так, как будто по ним щелкнули за пределами оверлея, вместо того чтобы закрываться.
closeOnContentClick	boolean | undefined	true	Скрыть компонент по клику на контент
contained	boolean | undefined	—	Ограничивает размер компонента и сетки в соответствии с его смещенным родительским элементом. Подразумевает использование свойств absolute и attach. (Примечание: родительский элемент должен иметь свойство position: relative.)
contentClass	any	—	Применяет пользовательский класс к отдельному элементу. Это удобно, поскольку содержимое перемещается в начало компонента cds-app (если не указан параметр attach) и не может быть выделено с помощью классов, переданных непосредственно в компонент.
contentProps	any	—	Применяет кастомные свойства (props) к перемещаемому контенту
disabled	boolean | null | undefined	null	Заблокированное состояние
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
height	string | number | undefined	—	Высота компонента
id	string | undefined	—	Уникальный идентификатор для связывания меню с его активатором. Если не указано, будет сгенерирован автоматически.
location	Anchor | undefined	'bottom'	Указывает точку привязки для позиционирования компонента с использованием ориентиров для выравнивания по горизонтали, по вертикали или по обоим направлениям
locationStrategy	"static" | "connected" | LocationStrategyFunction | undefined	'connected'	Определяет способ позиционирования содержимого оверлея. По умолчанию используется значение static, при котором содержимое центрируется в контейнере. Используйте connected для привязки к элементу-активатору.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	boolean | undefined	—	Значение компонента v-model. Если компонент поддерживает свойство multiple, по умолчанию используется пустой массив.
noClickAnimation	boolean | undefined	—	Отключает эффект bounce при нажатии за пределами элемента контента при использовании атрибута persistent.
offset	string | number | number[] | undefined	4	Увеличивает расстояние до цели. Если передать два числа, второе значение смещает анкер вбок и в сторону от цели.
opacity	string | number | undefined	—	Прозрачность элемента «scrim». Применяется только в том случае, если св-во scrim=true.
openDelay	string | number | undefined	300	Время ожидания в миллисекундах перед открытием компонента. Работает только с параметром open-on-hover.
openOnClick	boolean | undefined	—	Показать компонент по клику на активатор
openOnFocus	boolean | undefined	—	Показать компонент по фокусу на активатор
openOnHover	boolean | undefined	—	Показать компонент по наведению на активатор
origin	Anchor | "auto" | "overlap" | undefined	'auto'	Устанавливает точку привязки для содержимого наложения, которая выравнивается по точке привязки «location» на объекте-цели. При значении «auto» используется противоположная сторона точки «location». При значении «overlap» используется та же точка привязки, в результате чего наложение перекрывает объект-цель. Также задает значение CSS-свойства transform-origin для transitions enter/leave.
persistent	boolean | undefined	—	Клик за пределами элемента или нажатие клавиши Esc не приведет к его закрытию.
retainFocus	boolean | undefined	—	Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот.
scrim	string | boolean | undefined	false	Фон при активации overlay. Принимает значения true/false для включения фона и строку для определения цвета.
scrollStrategy	"none" | "close" | "block" | "reposition" | ScrollStrategyFunction | undefined	'none'	Стратегия, применяемая при активации компонента и прокрутке страницы пользователем.
stickToTarget	boolean | undefined	—	Позволяет контенту наложения выходить за пределы экрана при прокрутке.
submenu	boolean | undefined	—	Открывает/закрывает меню с помощью клавиш со стрелками left/right, а не up/down (для вложенных меню).
target	(string & {}) | Element | "parent" | ComponentPublicInstance | "cursor" | [x: number, y: number] | undefined	—	Если для параметра locationStrategy задано значение «connected», необходимо указать элемент или массив координат x, y, относительно которых должен располагаться оверлей. По умолчанию в качестве такого элемента используется элемент-активатор.
theme	string | undefined	—	Тема компонента
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | { component: Component; } | null | undefined	{ component: CdsModalTransition }	Анимация перехода
viewportMargin	string | number | undefined	12	Устанавливает пользовательские viewport margin для содержимого наложения
width	string | number | undefined	—	Ширина компонента
zIndex	string | number | undefined	2000	Значение z-index для компонента.

События

Имя	Тип	Описание
afterEnter	[]	Сработало после завершения анимации открытия меню
afterLeave	[]	Сработало после завершения анимации закрытия меню
update:modelValue	[value: boolean]	Сработало при открытии или закрытии меню. Передаёт новое состояние видимости

Слоты

Имя	Тип	Описание
activator	{ isActive: boolean; props: Record<string, any>; targetRef: TemplateRef; }	Слот для элемента, который будет выступать в роли активатора для оверлея.
default	{ isActive: Ref<boolean, boolean>; }	Слот для контента оверлея.

Exposed

Имя	Тип	Описание
activatorEl	HTMLElement | undefined	DOM-элемент активатора.
activatorRef	TemplateRef	Template ref для назначения активатора вручную.
animateClick	() => void	Запускает bounce-анимацию контента — как при клике мимо persistent-оверлея.
contentEl	HTMLElement | undefined	DOM-элемент контента оверлея.
globalTop	boolean	Является ли оверлей верхним в глобальном стеке открытых оверлеев.
rootEl	HTMLElement | undefined	Корневой DOM-элемент оверлея.
scrimEl	HTMLElement | undefined	DOM-элемент подложки (scrim), затемняющей страницу.
targetEl	HTMLElement | undefined	DOM-элемент цели позиционирования.
targetRef	TemplateRef	Template ref для назначения цели позиционирования вручную.
updateLocation	((e: Event) => void) | undefined	Пересчитывает позицию контента относительно цели.