Menu
The Menu is an interactive element that appears in response to user actions. It typically presents a list of Menu Items (actions) relevant to the current context.
The open attribute controls the open state.
<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><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-menu>The placement attribute controls the position of the Menu relative to its anchor element. See the API Reference for all possibile values.
When the menu anchor is placed close to the start/end of the viewport, placement of bottom or top will not present well due to lack of space.
In such cases - prefer using bottom-start or end instead.
<script setup lang="ts">import { VButton, VMenu, VMenuItem } from '@vonage/vivid-api-vue';</script>
<template> <div style="position: relative; text-align: end;"> <VMenu placement="left-start" open aria-label="Menu example"> <template #anchor><VButton label="Toggle Menu" appearance="outlined" /></template> <VMenuItem text="Menu item 1" /> <VMenuItem text="Menu item 2" /> </VMenu> </div></template><div style="position: relative; text-align: end;"> <vwc-menu placement="left-start" open aria-label="Menu example"> <vwc-button slot="anchor" label="Toggle Menu" appearance="outlined"></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>Use the offset attribute to add a gap (in px) between the trigger element and the menu.
<script setup lang="ts">import { VAvatar, VHeader, VMenu, VMenuItem, VIcon } from '@vonage/vivid-api-vue';</script>
<template> <VHeader alternate> Application Title <template #action-items> <VMenu placement="bottom-end" open aria-label="Menu example" :offset="12"> <template #anchor><VAvatar aria-label="Open profile menu" appearance="subtle" clickable /></template> <VMenuItem text="My Profile" ><template #icon><VIcon name="profile-line" /></template ></VMenuItem> <VMenuItem text="My Addresses" ><template #icon><VIcon name="address-book-line" /></template ></VMenuItem> <VMenuItem text="Logout" ><template #icon><VIcon name="exit-line" /></template ></VMenuItem> </VMenu> </template> </VHeader></template><vwc-header alternate> Application Title <vwc-menu placement="bottom-end" open aria-label="Menu example" offset="12" slot="action-items"> <vwc-avatar slot="anchor" aria-label="Open profile menu" appearance="subtle" clickable></vwc-avatar> <vwc-menu-item text="My Profile"> <vwc-icon slot="icon" name="profile-line"></vwc-icon> </vwc-menu-item> <vwc-menu-item text="My Addresses"> <vwc-icon slot="icon" name="address-book-line"></vwc-icon> </vwc-menu-item> <vwc-menu-item text="Logout"> <vwc-icon slot="icon" name="exit-line"></vwc-icon> </vwc-menu-item> </vwc-menu></vwc-header>