To pick a value in a form, take CdsSelect — it stays visible and gets submitted. For a short hint on hover use CdsTooltip, and for a dialog that demands an answer use CdsModal. The content of a menu is usually built from CdsList.

Inside the menu works CdsOverlay: it computes the coordinates, flips the panel when there is not enough room up to the edge of the screen, and recalculates the position on scroll. That is why the menu shares its positioning and opening props with the overlay.

Variations

Activators

A menu is opened by an activator element — you can set it in three ways:

1. Through the activator slot — the props from the slot (v-bind="props") attach the handlers and the aria attributes to the element. This is the default way: the activator sits next to the menu.
2. Through the parent — activator="parent" takes the element that contains the CdsMenu. Handy when the activator is already built and you do not want to wrap it.
3. Through a selector — activator="#id" links the menu to any element on the page, even a distant one in the markup.

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>

Opening

By default the menu opens on click. The open-on-hover prop switches it to hover — this is how navigation menus behave; a click then does not open the panel. The open-delay and close-delay delays (300 and 250 ms) keep the menu from flickering when the cursor just passes by. Together with open-on-hover, opening on focus is enabled as well — turn it off with :open-on-focus="false" if the menu should react to the mouse only.

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>

Position

The location prop sets the side of the activator the menu appears on: bottom by default, top, end, bottom end — the side and the alignment. If there is not enough room, the menu flips to the opposite edge on its own. The offset prop tunes the distance to the activator, and viewport-margin sets the minimum gap to the edge of the screen.

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>

Sizes

The width of the menu equals the width of its content. The min-width, max-width and max-height props set the bounds: the minimum width keeps the panel from collapsing on short items, and a limited height turns on scrolling instead of a full-screen menu.

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>

Closing

The menu closes on a click inside the content, on a click outside and on Esc. The :close-on-content-click="false" prop keeps the panel open — you need that when it holds checkboxes, fields or several steps in a row. The persistent prop ignores the outside click and Esc: then the menu can only be closed by your own button through 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>

Nested menus

Menus can be nested into each other: every list item becomes an activator (activator="parent") for a child CdsMenu with the submenu prop — it shifts the panel sideways and moves the navigation to the left and right arrow keys. The open-on-hover prop opens the submenu on hover, and :open-on-focus="false" keeps it from opening while tabbing through.

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>

Animation

The transition prop changes the animation the panel appears with.

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>

Slots

Slot	Description
activator	The element that opens the menu. The slot props (props) attach the handlers to it
default	The content of the panel. Usually CdsList, CdsCard or CdsSurface

Guidelines

Storybook

Scenarios

Actions on a record

Rare actions on a table row or a card are collected in a menu behind the "⋮" button: the row stays clean, and the actions do not compete with the main button. location="bottom end" pins the panel to the right edge of the activator, slim on the list removes the extra paddings, and aria-label names the record the menu belongs to.

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>

Context menu

A menu can open at the point of the click: the contextmenu handler puts the cursor coordinates into target, and v-model controls the visibility — no activator is needed here. A new click moves the open panel to the new spot. The default animation is meant for an element activator, so for a menu placed by coordinates set a CSS animation — for example, 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>

Menu in the header

In the application header a menu solves two tasks: it expands the navigation sections and collects everything about the account behind the avatar. The activator of the user menu is a CdsAvatar inside a button with an aria-label, location="bottom end" pins the panel to the right edge, and min-width keeps it from jumping in width. The first list item shows whose account it is, and CdsListItemDivider separates the sections from signing out.

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>

Filter with several values

When several values are picked inside a menu, the panel must not close on the very first click: :close-on-content-click="false" keeps it open, and v-model lets the "Apply" button close the menu. The selection piles up in a draft and is applied as a whole — until the button is pressed, the list of records does not change.

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

Props

Name	Type	Default	Description
activator	(string & {}) | Element | "parent" | ComponentPublicInstance | undefined	—	The element that activates the component
activatorProps	Record<string, any> | undefined	{}	Props for the activator element
attach	string | boolean | Element | undefined	—	Sets the DOM element the overlay content is moved to. It accepts a direct element reference, a querySelector string, or true to disable moving. By default the body element is used. Changing this prop is usually not recommended except for edge cases: the default positioning algorithm handles most scenarios better than it can without moving, and unexpected behavior may appear if the menu ends up being a child of its activator.
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.
closeDelay	string | number | undefined	250	Delay in milliseconds before the component closes. Works only together with open-on-hover.
closeOnBack	boolean | undefined	true	Closes the overlay content when the browser Back button is pressed or $router.back() is called, cancelling the original navigation. persistent overlays cancel the navigation and animate as if they were clicked outside instead of closing.
closeOnContentClick	boolean | undefined	true	Hide the component on a click on the content
contained	boolean | undefined	—	Limits the size of the component and of its grid to the offset parent. Implies the absolute and attach props. (Note: the parent element must have position: relative.)
contentClass	any	—	Applies a custom class to the content element. This is handy because the content is moved to the beginning of the cds-app component (unless attach is set) and cannot be selected with classes passed to the component directly.
contentProps	any	—	Applies custom props to the moved content
disabled	boolean | null | undefined	null	Disabled state
eager	boolean | undefined	—	Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO.
height	string | number | undefined	—	Component height
id	string | undefined	—	Unique identifier that links the menu to its activator. If it is not set, it is generated automatically.
location	Anchor | undefined	'bottom'	Sets the anchor point used to position the component, aligning it horizontally, vertically or in both directions
locationStrategy	"static" | "connected" | LocationStrategyFunction | undefined	'connected'	Sets the way the overlay content is positioned. By default static is used, which centers the content in its container. Use connected to attach the content to the activator element.
maxHeight	string | number | undefined	—	Maximum component height
maxWidth	string | number | undefined	—	Maximum component width
minHeight	string | number | undefined	—	Minimum component height
minWidth	string | number | undefined	—	Minimum component width
modelValue	boolean | undefined	—	The v-model value of the component. If the component supports the multiple prop, an empty array is used by default.
noClickAnimation	boolean | undefined	—	Disables the bounce effect on a click outside the content element when persistent is set.
offset	string | number | number[] | undefined	4	Increases the distance to the target. If two numbers are passed, the second one shifts the anchor sideways, away from the target.
opacity	string | number | undefined	—	Opacity of the scrim element. Applies only when scrim=true.
openDelay	string | number | undefined	300	Delay in milliseconds before the component opens. Works only together with open-on-hover.
openOnClick	boolean | undefined	—	Show the component on a click on the activator
openOnFocus	boolean | undefined	—	Show the component when the activator gets focus
openOnHover	boolean | undefined	—	Show the component on hover over the activator
origin	Anchor | "auto" | "overlap" | undefined	'auto'	Sets the anchor point of the overlay content that is aligned with the location anchor of the target. With "auto" the opposite side of the location point is used. With "overlap" the same anchor point is used, so the overlay overlaps the target. It also sets the CSS transform-origin property for the enter/leave transitions.
persistent	boolean | undefined	—	A click outside the element or the Esc key does not close it.
retainFocus	boolean | undefined	—	Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back.
scrim	string | boolean | undefined	false	Backdrop shown while the overlay is active. Accepts true/false to toggle the backdrop and a string to set its color.
scrollStrategy	"none" | "close" | "block" | "reposition" | ScrollStrategyFunction | undefined	'none'	Strategy applied when the component is active and the user scrolls the page.
stickToTarget	boolean | undefined	—	Lets the overlay content go off screen while scrolling.
submenu	boolean | undefined	—	Opens and closes the menu with the left/right arrow keys instead of up/down (for nested menus).
target	(string & {}) | Element | "parent" | ComponentPublicInstance | "cursor" | [x: number, y: number] | undefined	—	When locationStrategy is set to "connected", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used.
theme	string | undefined	—	Component theme
transition	string | boolean | (TransitionProps & { component?: Component | undefined; }) | { component: Component; } | null | undefined	{ component: CdsModalTransition }	Transition animation
viewportMargin	string | number | undefined	12	Sets a custom viewport margin for the overlay content
width	string | number | undefined	—	Component width
zIndex	string | number | undefined	2000	The z-index value of the component.

Events

Name	Type	Description
afterEnter	[]	Fired after the opening animation of the menu has finished
afterLeave	[]	Fired after the closing animation of the menu has finished
update:modelValue	[value: boolean]	Fired when the menu is opened or closed. Passes the new visibility state

Slots

Name	Type	Description
activator	{ isActive: boolean; props: Record<string, any>; targetRef: TemplateRef; }	Slot for the element that acts as the activator of the overlay.
default	{ isActive: Ref<boolean, boolean>; }	Slot for the overlay content.

Exposed

Name	Type	Description
activatorEl	HTMLElement | undefined	The DOM element of the activator.
activatorRef	TemplateRef	Template ref for assigning the activator manually.
animateClick	() => void	Runs the bounce animation of the content — the same as on a click outside a persistent overlay.
contentEl	HTMLElement | undefined	The DOM element of the overlay content.
globalTop	boolean	Whether the overlay is the top one in the global stack of open overlays.
rootEl	HTMLElement | undefined	The root DOM element of the overlay.
scrimEl	HTMLElement | undefined	The DOM element of the scrim that dims the page.
targetEl	HTMLElement | undefined	The DOM element of the positioning target.
targetRef	TemplateRef	Template ref for assigning the positioning target manually.
updateLocation	((e: Event) => void) | undefined	Recalculates the position of the content relative to the target.