<script setup lang="ts">
import { VMenu, VMenuItem, VButton, VIcon } from '@vonage/vivid-api-vue';
</script>
<template>
  <VMenu open ariaLabel="Menu example" placement="bottom-end">
    <template #anchor>
      <VButton aria-Label="Open menu" appearance="outlined"
        ><template #icon><VIcon name="more-vertical-line" /></template
      ></VButton>
    </template>
    <VMenuItem text="Menu item 1" />
    <VMenuItem text="Menu item 2" />
  </VMenu>
</template>

import { registerMenu, registerMenuItem } from '@vonage/vivid-api';

registerMenu('your-prefix');
registerMenuItem('your-prefix');

<script type="module">
  import { registerMenu, registerMenuItem, registerButton, registerIcon } from '@vonage/vivid-api';
  const prefix = 'your-prefix';
  registerMenu(prefix);
  registerMenuItem(prefix);
  registerIcon(prefix);

    registerButton(prefix);

</script>

<your-prefix-menu open aria-label="Menu example" placement="bottom-end">
  <your-prefix-button slot="anchor" aria-label="Open menu" appearance="outlined">
    <your-prefix-icon slot="icon" name="more-vertical-line"></your-prefix-icon>
  </your-prefix-button>
  <your-prefix-menu-item text="Menu item 1"></your-prefix-menu-item>
  <your-prefix-menu-item text="Menu item 2"></your-prefix-menu-item>
</your-prefix-menu>

Trigger

The trigger attribute controls whether the Menu opens and closes itself automatically.

auto (default) - The menu opens and closes automatically when the anchor is clicked. It also closes itself when the user selects a menu item with a role different from menuitemcheckbox.
legacy - The menu opens automatically when the anchor is clicked. This value is not recommended and only exists for backwards compatibility.
off - The menu does not open or close automatically.

<script setup lang="ts">
import { VButton, VDivider, VIcon, VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu aria-label="Menu example" placement="bottom-end">
    <template #anchor>
      <VButton aria-label="Open menu" appearance="outlined">
        <template #icon><VIcon name="more-vertical-line" /></template>
      </VButton>
    </template>
    <VMenuItem text="Menu item 1" />
    <VMenuItem text="Menu item 2" />
    <VDivider />
    <VMenuItem control-type="checkbox" text="Option 1" />
    <VMenuItem control-type="checkbox" text="Option 2" />
    <VDivider />
    <VMenuItem control-type="radio" text="Option 1" />
    <VMenuItem control-type="radio" text="Option 2" />
  </VMenu>
</template>

<vwc-menu aria-label="Menu example" placement="bottom-end">
  <vwc-button slot="anchor" aria-label="Open menu" appearance="outlined">
    <vwc-icon slot="icon" name="more-vertical-line"></vwc-icon>
  </vwc-button>
  <vwc-menu-item text="Menu item 1"></vwc-menu-item>
  <vwc-menu-item text="Menu item 2"></vwc-menu-item>
  <vwc-divider></vwc-divider>
  <vwc-menu-item control-type="checkbox" text="Option 1"></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Option 2"></vwc-menu-item>
  <vwc-divider></vwc-divider>
  <vwc-menu-item control-type="radio" text="Option 1"></vwc-menu-item>
  <vwc-menu-item control-type="radio" text="Option 2"></vwc-menu-item>
</vwc-menu>

Auto Dismiss

The auto-dismiss attribute sets it to automatically close when focus is moved away from it, i.e. by clicking outside the menu.

<script setup lang="ts">
import { VButton, VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <div style="position: relative">
    <VMenu auto-dismiss id="menu" open aria-label="Menu example">
      <template #anchor>
        <VButton label="Toggle Menu" appearance="outlined" dropdown-indicator />
      </template>
      <VMenuItem text="Menu item 1" />
      <VMenuItem text="Menu item 2" />
    </VMenu>
  </div>
</template>

<div style="position: relative">
  <vwc-menu auto-dismiss id="menu" open aria-label="Menu example">
    <vwc-button slot="anchor" label="Toggle Menu" appearance="outlined" dropdown-indicator></vwc-button>
    <vwc-menu-item text="Menu item 1"></vwc-menu-item>
    <vwc-menu-item text="Menu item 2"></vwc-menu-item>
  </vwc-menu>
</div>

Position Strategy

The position-strategy attribute sets the position strategy. It can be set to fixed (default) or absolute.

In vivid version 4.12.0, popover attribute was added to menu, using the power of top-layer, eliminating the effect of change in the containing block.

We will remove the position-strategy in a future major version of Vivid to make this the default behaviour.

<script setup lang="ts">
import { VButton, VIcon, VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <div style="position: absolute; container-type: inline-size;">
    <VMenu position-strategy="absolute" aria-label="Menu example" placement="bottom-end">
      <template #anchor>
        <VButton aria-label="Open menu" appearance="outlined">
          <template #icon><VIcon name="more-vertical-line" /></template>
        </VButton>
      </template>
      <VMenuItem text="Menu item 1" />
      <VMenuItem text="Menu item 2" />
    </VMenu>
  </div>
</template>

<div style="position: absolute; container-type: inline-size;">
  <vwc-menu position-strategy="absolute" aria-label="Menu example" placement="bottom-end">
    <vwc-button slot="anchor" aria-label="Open menu" appearance="outlined">
      <vwc-icon slot="icon" name="more-vertical-line"></vwc-icon>
    </vwc-button>
    <vwc-menu-item text="Menu item 1"></vwc-menu-item>
    <vwc-menu-item text="Menu item 2"></vwc-menu-item>
  </vwc-menu>
</div>

Anchor

It is recommended use the anchor slot to set the anchor.

The anchor attribute should be set to the id value of the anchor element or pass the anchor element itself.

Pay attention to the source order the components to ensure they can be operated logically using only a keyboard.

<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue';
import { VButton, VMenu, VMenuItem } from '@vonage/vivid-api-vue';

const button2 = useTemplateRef('button2');
const menu2 = useTemplateRef('menu2');

onMounted(() => {
if (menu2.value && button2.value) {
menu2.value.element.anchor = button2.value.element;
}
});

</script>

<template>
  <div style="position: relative">
    <VButton id="button1" label="ID anchor" appearance="outlined" />
    <VMenu anchor="button1" aria-label="ID anchor menu example" auto-dismiss>
      <VMenuItem text="My anchor is an ID" />
    </VMenu>

      <VButton ref="button2" label="HTMLElement anchor" appearance="outlined" />
      <VMenu ref="menu2" aria-label="HTML element menu example" auto-dismiss>
        <VMenuItem text="My anchor is an HTMLElement" />
      </VMenu>
    </div>

</template>

<div style="position: relative">
  <vwc-button id="button1" label="ID anchor" appearance="outlined"></vwc-button>
  <vwc-menu anchor="button1" aria-label="ID anchor menu example" auto-dismiss>
    <vwc-menu-item text="My anchor is an ID"></vwc-menu-item>
  </vwc-menu>

    <vwc-button id="button2" label="HTMLElement anchor" appearance="outlined"></vwc-button>
    <vwc-menu id="menu2" aria-label="HTML element menu example" auto-dismiss>
      <vwc-menu-item text="My anchor is an HTMLElement"></vwc-menu-item>
    </vwc-menu>

</div>

<script>const button2 = document.getElementById('button2'); const menu2 = document.getElementById('menu2'); menu2.anchor = button2;</script>

Slots

Default Slot

Place menu items and dividers between them in the default slot.

Only Menu Item, Divider and HTML elements with role of menuitem or separator are allowed. They must be direct descendants of the Menu, and cannot be nested inside other elements.

<script setup lang="ts">
import { VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu open aria-label="Menu example">
    <VMenuItem text="Menu item 1" />
    <VMenuItem text="Menu item 2" />
  </VMenu>
</template>

Anchor Slot

The Menu positions itself relative to an anchor element. Place it inside the anchor slot. It is recommended to use the Button component as the anchor element.

<script setup lang="ts">
import { VButton, VIcon, VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu open aria-label="Menu example" placement="bottom-end">
    <template #anchor>
      <VButton aria-label="Open menu" appearance="outlined">
        <template #icon><VIcon name="more-vertical-line" /></template>
      </VButton>
    </template>
    <VMenuItem text="Menu item 1" />
    <VMenuItem text="Menu item 2" />
  </VMenu>
</template>

<vwc-menu open aria-label="Menu example" placement="bottom-end">
  <vwc-button slot="anchor" aria-label="Open menu" appearance="outlined">
    <vwc-icon slot="icon" name="more-vertical-line"></vwc-icon>
  </vwc-button>
  <vwc-menu-item text="Menu item 1"></vwc-menu-item>
  <vwc-menu-item text="Menu item 2"></vwc-menu-item>
</vwc-menu>

Header Slot

Use the header slot to add additional content to the top of the menu.

<script setup lang="ts">
import { VMenu, VMenuItem, VTextField, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu open aria-label="Menu example">
    <template #header>
      <VTextField placeholder="Search"
        ><template #icon><VIcon name="search" /></template
      ></VTextField>
    </template>
    <VMenuItem text="Menu item 1" />
    <VMenuItem text="Menu item 2" />
  </VMenu>
</template>

<vwc-menu open aria-label="Menu example">
  <vwc-text-field slot="header" placeholder="Search">
    <vwc-icon slot="icon" name="search"></vwc-icon>
  </vwc-text-field>
  <vwc-menu-item text="Menu item 1"></vwc-menu-item>
  <vwc-menu-item text="Menu item 2"></vwc-menu-item>
</vwc-menu>

Action Items Slot

The action-items slot allows the addition of action items (in this case, a Button) to the bottom of the Menu.

<script setup lang="ts">
import { VButton, VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu open aria-label="Menu example">
    <VMenuItem text="Menu item 1" />
    <VMenuItem text="Menu item 2" />
    <template #action-items>
      <VButton appearance="filled" label="Action" />
    </template>
  </VMenu>
</template>

<vwc-menu open aria-label="Menu example">
  <vwc-menu-item text="Menu item 1"></vwc-menu-item>
  <vwc-menu-item text="Menu item 2"></vwc-menu-item>
  <vwc-button slot="action-items" appearance="filled" label="Action"></vwc-button>
</vwc-menu>

CSS Variables

Maximum Inline Size

Use the --menu-max-inline-size variable to set the maximum inline size.

Default: max-content

When setting a value to the max-inline-size - make sure the Menu is OK in small resolutions as well.

In mobile, the max-inline-size is 300px by default, but can be changed with the css-variable.

<script setup lang="ts">
import { VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu open class="menu" aria-label="Menu example">
    <VMenuItem text="Lorem ipsum dolor sit amet conse ctetur adipisicing elit" />
  </VMenu>
</template>

<style>
.menu {
  --menu-max-inline-size: 300px;
}
</style>

<style>
  vwc-menu {
    --menu-max-inline-size: 300px;
  }
</style>

<vwc-menu open aria-label="Menu example">
  <vwc-menu-item text="Lorem ipsum dolor sit amet conse ctetur adipisicing elit"></vwc-menu-item>
</vwc-menu>

Minimum Inline Size

Use the --menu-min-inline-size variable to set th minimum inline size.

Default: auto

<script setup lang="ts">
import { VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu open class="menu" aria-label="Menu example">
    <VMenuItem text="Menu Item" />
  </VMenu>
</template>

<style>
.menu {
  --menu-min-inline-size: 300px;
}
</style>

Use the --menu-block-size variable to set the block size.

Default: 408px

<script setup lang="ts">
import { VMenu, VMenuItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VMenu open class="menu" aria-label="Menu example">
    <VMenuItem text="Menu Item" />
    <VMenuItem text="Menu Item" />
    <VMenuItem text="Menu Item" />
    <VMenuItem text="Menu Item" />
    <VMenuItem text="Menu Item" />
    <VMenuItem text="Menu Item" />
    <VMenuItem text="Menu Item" />
  </VMenu>
</template>

<style>
.menu {
  --menu-block-size: 100px;
}
</style>

<style>
  vwc-menu {
    --menu-block-size: 100px;
  }
</style>

<vwc-menu open aria-label="Menu example">
  <vwc-menu-item text="Menu Item"></vwc-menu-item>
  <vwc-menu-item text="Menu Item"></vwc-menu-item>
  <vwc-menu-item text="Menu Item"></vwc-menu-item>
  <vwc-menu-item text="Menu Item"></vwc-menu-item>
  <vwc-menu-item text="Menu Item"></vwc-menu-item>
  <vwc-menu-item text="Menu Item"></vwc-menu-item>
  <vwc-menu-item text="Menu Item"></vwc-menu-item>
</vwc-menu>

API Reference

Property	Type	Description
anchor	`string \| HTMLElement`	ID or direct reference to the component's anchor element.
autoDismiss	`boolean`	Sets the Menu to close when focus is lost
offset	`number`	Adds offset to the popup
open	`boolean`	Sets the open state of the Menu
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Sets the desired position of the Menu relative to it's anchor element
positionStrategy	`'fixed' \| 'absolute'`	Sets the position strategy
trigger	`'off' \| 'auto' \| 'legacy'`	Sets trigger method of Menu

Property	Type	Description
anchor	`string \| HTMLElement`	ID or direct reference to the component's anchor element.
auto-dismiss	`boolean`	Sets the Menu to close when focus is lost
offset	`number`	Adds offset to the popup
open	`boolean`	Sets the open state of the Menu
placement	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-end' \| 'left-start' \| 'right-end' \| 'right-start'`	Sets the desired position of the Menu relative to it's anchor element
position-strategy	`'fixed' \| 'absolute'`	Sets the position strategy
trigger	`'off' \| 'auto' \| 'legacy'`	Sets trigger method of Menu

Name	Description
action-items	Used to add action items to the bottom of the menu.
anchor	Used to set the anchor element for the menu.
default	Default slot.
header	Used to add additional content to the top of the menu.

Name	Description
action-items	Used to add action items to the bottom of the menu.
anchor	Used to set the anchor element for the menu.
default	Default slot.
header	Used to add additional content to the top of the menu.

Name	Type	Description
close	`CustomEvent<undefined>`	Fired when the menu is closed
open	`CustomEvent<undefined>`	Fired when the menu is opened

Name	Type	Description
close	`CustomEvent<undefined>`	Fired when the menu is closed
open	`CustomEvent<undefined>`	Fired when the menu is opened

Name	Params	Returns	Description
collapseExpandedItem		`void`	Collapses any expanded Menu Items.
focus		`void`	Moves focus into the Menu. If there is a child with the `autofocus` attribute, it will be focused. Otherwise, the first Menu Item will be focused.
openChanged	`_: boolean` `newValue: boolean`	`void`

Property	Type	Description
checkedAppearance	`'normal' \| 'tick-only'`	Controls the appearance of the check indicator.
checkTrailing	`boolean`	Sets the check element to appear at the end of the Menu Item
checked (modelValue)	`boolean`	Sets the checked state
connotation	`'accent' \| 'cta'`	Sets the connotation that appears when checked
controlType	`'checkbox' \| 'radio'`	Whether the menu item should behave as a checkbox or radio button.
disabled	`boolean`	Sets the disabled state
expanded	`boolean`	Sets the expanded state
text	`string`	Text content
textSecondary	`string`	Give more context to the text

Property	Type	Description
check-appearance	`'normal' \| 'tick-only'`	Controls the appearance of the check indicator.
check-trailing	`boolean`	Sets the check element to appear at the end of the Menu Item
checked	`boolean`	Sets the checked state
connotation	`'accent' \| 'cta'`	Sets the connotation that appears when checked
control-type	`'checkbox' \| 'radio'`	Whether the menu item should behave as a checkbox or radio button.
disabled	`boolean`	Sets the disabled state
expanded	`boolean`	Sets the expanded state
text	`string`	Text content
text-secondary	`string`	Give more context to the text

Name	Description
meta	Assign nodes to the `meta` slot to set a badge or an additional icon.
submenu	Assign a Menu to the `submenu` slot to add a submenu.
trailing-meta	Assign nodes to the `meta` slot to set a badge or an additional icon.

Name	Description
meta	Assign nodes to the `meta` slot to set a badge or an additional icon.
submenu	Assign a Menu to the `submenu` slot to add a submenu.
trailing-meta	Assign nodes to the `meta` slot to set a badge or an additional icon.

Name	Type	Description
change	`CustomEvent<undefined>`	Fired when the item is triggered. Does not fire when a submenu is collapsed or expanded.
expanded-change	`CustomEvent<HTMLElement>`	Fired when the expanded state changes.

Name	Type	Description
change	`CustomEvent<undefined>`	Fired when the item is triggered. Does not fire when a submenu is collapsed or expanded.
expanded-change	`CustomEvent<HTMLElement>`	Fired when the expanded state changes.

Menu

Usage

Trigger

Auto Dismiss

Position Strategy

Anchor

Slots

Default Slot

Anchor Slot

Header Slot

Action Items Slot

CSS Variables

Maximum Inline Size

Minimum Inline Size

Menu Block Size

API Reference

menu

Properties

Slots

Events

Methods

menu-item

Properties

Slots

Events