Menu Item

An option to appear inside a Menu.

Text

The text attribute sets the text content.

Secondary Text

The Menu Item can be given extra context using the text-secondary attribute.

To improve readability, avoid long text and multiple lines where possible.

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

<template>
  <VMenu open aria-label="Example menu">
    <VMenuItem text="Menu item" text-secondary="Secondary text" />
  </VMenu>
</template>

Icon

The icon attribute sets an icon.

View list of available icon at the vivid icons gallery.

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

<template>
  <VMenu open aria-label="Example menu">
    <VMenuItem text="Export to PDF"
      ><template #icon><VIcon name="file-pdf-line" /></template
    ></VMenuItem>
  </VMenu>
</template>

Control Type

The control-type attribute allows the Menu Item to become checkable and behave either as a checkbox or radio button.

When control-type is radio, only one Menu Item can be checked in the current section. Sections are separated by Dividers.

Previously, the role attribute was used to set the control type. This is now deprecated (as of 05/25) and replaced with the control-type attribute. Using role is still functional, but will be removed in a future major release.

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

<template>
  <VMenu open aria-label="Formatting">
    <VMenuItem control-type="checkbox" text="Bold" />
    <VMenuItem control-type="checkbox" text="Italic" />
    <VMenuItem control-type="checkbox" text="Underlined" />
    <VDivider />
    <VMenuItem control-type="radio" text="Small" />
    <VMenuItem control-type="radio" text="Medium" />
    <VMenuItem control-type="radio" text="Large" />
    <VDivider />
    <VMenuItem text="Clear formatting" />
  </VMenu>
</template>

<vwc-menu open aria-label="Formatting">
  <vwc-menu-item control-type="checkbox" text="Bold"></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Italic"></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Underlined"></vwc-menu-item>
  <vwc-divider></vwc-divider>
  <vwc-menu-item control-type="radio" text="Small"></vwc-menu-item>
  <vwc-menu-item control-type="radio" text="Medium"></vwc-menu-item>
  <vwc-menu-item control-type="radio" text="Large"></vwc-menu-item>
  <vwc-divider></vwc-divider>
  <vwc-menu-item text="Clear formatting"></vwc-menu-item>
</vwc-menu>

Check Trailing

When control-type is set, the check-trailing attribute places the checkbox / radio indicator at the end of the Menu Item.

If the icon attribute is present, the indicator will be trailing by default.

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

<template>
  <VMenu open aria-label="Example menu">
    <VMenuItem control-type="checkbox" text="Checkbox 1" check-trailing />
    <VMenuItem control-type="checkbox" text="Checkbox 2" check-trailing />
    <VMenuItem control-type="checkbox" text="Checkbox 3"
      ><template #icon><VIcon name="image-line" /></template
    ></VMenuItem>
    <VDivider />
    <VMenuItem control-type="radio" text="Radio 1" check-trailing />
    <VMenuItem control-type="radio" text="Radio 2" check-trailing />
    <VMenuItem control-type="radio" text="Radio 3"
      ><template #icon><VIcon name="image-line" /></template
    ></VMenuItem>
  </VMenu>
</template>

<vwc-menu open aria-label="Example menu">
  <vwc-menu-item control-type="checkbox" text="Checkbox 1" check-trailing></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Checkbox 2" check-trailing></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Checkbox 3">
    <vwc-icon slot="icon" name="image-line"></vwc-icon>
  </vwc-menu-item>
  <vwc-divider></vwc-divider>
  <vwc-menu-item control-type="radio" text="Radio 1" check-trailing></vwc-menu-item>
  <vwc-menu-item control-type="radio" text="Radio 2" check-trailing></vwc-menu-item>
  <vwc-menu-item control-type="radio" text="Radio 3">
    <vwc-icon slot="icon" name="image-line"></vwc-icon>
  </vwc-menu-item>
</vwc-menu>

Check Appearance

When control-type is set, the check-appearance attribute changes the appearance of the checkbox / radio indicator.

In the example below it is set to tick-only (default is normal).

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

<template>
  <VMenu open aria-label="Example menu">
    <VMenuItem control-type="checkbox" text="Checkbox 1" check-appearance="tick-only" checked />
    <VMenuItem control-type="checkbox" text="Checkbox 2" check-appearance="tick-only" checked />
    <VMenuItem control-type="checkbox" text="Checkbox 3" check-appearance="tick-only" />
    <VDivider />
    <VMenuItem control-type="radio" text="Radio 1" check-appearance="tick-only" />
    <VMenuItem control-type="radio" text="Radio 2" check-appearance="tick-only" checked />
  </VMenu>
</template>

<vwc-menu open aria-label="Example menu">
  <vwc-menu-item control-type="checkbox" text="Checkbox 1" check-appearance="tick-only" checked></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Checkbox 2" check-appearance="tick-only" checked></vwc-menu-item>
  <vwc-menu-item control-type="checkbox" text="Checkbox 3" check-appearance="tick-only"></vwc-menu-item>
  <vwc-divider></vwc-divider>
  <vwc-menu-item control-type="radio" text="Radio 1" check-appearance="tick-only"></vwc-menu-item>
  <vwc-menu-item control-type="radio" text="Radio 2" check-appearance="tick-only" checked></vwc-menu-item>
</vwc-menu>

Checked

When control-type is set, the checked attribute sets the checked state.

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

<template>
  <VMenu open aria-label="Example menu">
    <VMenuItem checked control-type="checkbox" text="Checked Checkbox Menu Item" />
    <VDivider />
    <VMenuItem checked control-type="radio" text="Checked Radio Menu Item" />
  </VMenu>
</template>

<vwc-menu open aria-label="Example menu">
  <vwc-menu-item checked control-type="checkbox" text="Checked Checkbox Menu Item"></vwc-menu-item>
  <vwc-divider></vwc-divider>
  <vwc-menu-item checked control-type="radio" text="Checked Radio Menu Item"></vwc-menu-item>
</vwc-menu>

Connotation

The connotation attribute controls the checked color.

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

<template>
  <VMenu open aria-label="Example menu" style="--menu-block-size: auto;">
    <VMenuItem control-type="checkbox" checked text="Accent (default)" />
    <VMenuItem connotation="cta" control-type="checkbox" checked text="CTA" />
  </VMenu>
</template>

<vwc-menu open aria-label="Example menu" style="--menu-block-size: auto;">
  <vwc-menu-item control-type="checkbox" checked text="Accent (default)"></vwc-menu-item>
  <vwc-menu-item connotation="cta" control-type="checkbox" checked text="CTA"></vwc-menu-item>
</vwc-menu>

Disabled

The disabled attribute controls the disabled state.

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

<template>
  <VMenu open aria-label="Example menu">
    <VMenuItem disabled text="Disabled Menu item" />
  </VMenu>
</template>