Menu

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

<template>
  <VMenu placement="bottom-start" open aria-label="Menu example">
    <template #anchor><VButton label="Select" appearance="filled" dropdown-indicator /></template>
    <template #header
      ><VTextField slot="header" placeholder="Search" autofocus
        ><template #icon><VIcon name="search" /></template></VTextField
    ></template>
    <VMenuItem control-type="checkbox" text="Checkbox 1" />
    <VMenuItem control-type="checkbox" text="Checkbox 2" />
    <VMenuItem control-type="checkbox" text="Checkbox 3" />
    <VButton slot="action-items" appearance="outlined" label="Close" />
    <VButton slot="action-items" appearance="filled" label="Select" />
  </VMenu>
</template>

<vwc-menu placement="bottom-start" open aria-label="Menu example">
  <vwc-button slot="anchor" label="Select" appearance="filled" dropdown-indicator></vwc-button>
  <vwc-text-field slot="header" placeholder="Search" autofocus>
    <vwc-icon slot="icon" name="search"></vwc-icon>
  </vwc-text-field>
  <vwc-menu-item control-type="checkbox" text="Checkbox 1"></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Checkbox 2"></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Checkbox 3"></vwc-menu-item>
  <vwc-button slot="action-items" appearance="outlined" label="Close"></vwc-button>
  <vwc-button slot="action-items" appearance="filled" label="Select"></vwc-button>
</vwc-menu>

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

<template>
  <VMenu placement="bottom-start" open aria-label="Menu example">
    <template #anchor>
      <VButton aria-label="Close menu">
        <template #icon><VIcon name="close-line" /></template>
      </VButton>
    </template>
    <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
      <VMenuItem text="My Addresses"
        ><template #icon><VIcon name="address-book-line" /></template
      ></VMenuItem>
    </a>
    <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
      <VMenuItem text="My Profile"
        ><template #icon><VIcon name="profile-line" /></template
      ></VMenuItem>
    </a>
    <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
      <VMenuItem text="Team"
        ><template #icon><VIcon name="group-line" /></template
      ></VMenuItem>
    </a>
    <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
      <VMenuItem text="Logout"
        ><template #icon><VIcon name="quit-line" /></template
      ></VMenuItem>
    </a>
  </VMenu>
</template>

<vwc-menu placement="bottom-start" open aria-label="Menu example">
  <vwc-button slot="anchor" aria-label="Close menu">
    <vwc-icon slot="icon" name="close-line"></vwc-icon>
  </vwc-button>
  <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
    <vwc-menu-item text="My Addresses">
      <vwc-icon slot="icon" name="address-book-line"></vwc-icon>
    </vwc-menu-item>
  </a>
  <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
    <vwc-menu-item text="My Profile">
      <vwc-icon slot="icon" name="profile-line"></vwc-icon>
    </vwc-menu-item>
  </a>
  <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
    <vwc-menu-item text="Team">
      <vwc-icon slot="icon" name="group-line"></vwc-icon>
    </vwc-menu-item>
  </a>
  <a role="menuitem" href="https://www.vonage.com" target="_blank" rel="noopener noreferrer">
    <vwc-menu-item text="Logout">
      <vwc-icon slot="icon" name="quit-line"></vwc-icon>
    </vwc-menu-item>
  </a>
</vwc-menu>