Menu Component Demos

Basic Menu (Click Trigger)

<template>
  <OMenu trigger-type="click" placement="bottom-start" :width="300">
    <template #trigger>
      <button class="menu-trigger">
        Account
        <span aria-hidden="true">▾</span>
      </button>
    </template>
    <template #content>
      <div class="menu-items">
        <button v-for="item in profileItems" :key="item.label" class="menu-item" @click="handleSelect(item)">
          <span class="item-icon">{{ item.icon }}</span>
          {{ item.label }}
        </button>
      </div>
    </template>
  </OMenu>
</template>

Hover Menu

<template>
  <OMenu trigger-type="hover" placement="bottom" :offset="[0, 0.25]">
    <template #trigger>
      <button class="menu-trigger hover-trigger">
        Hover for actions
        <span aria-hidden="true">▾</span>
      </button>
    </template>
    <template #content>
      <div class="menu-items">
        <button v-for="item in quickFilters" :key="item.label" class="menu-item" @click="handleSelect(item)">
          {{ item.label }}
        </button>
      </div>
    </template>
  </OMenu>
</template>

Custom Width & Offset

<template>
  <OMenu
    trigger-type="click"
    placement="bottom-start"
    :width="280"
    :match-trigger-width="false"
    :offset="[0, 0.5]"
  >
    <template #trigger>
      <button class="menu-trigger">Advanced filters</button>
    </template>
    <template #content>
      <div class="menu-items wide-menu">
        <p class="menu-heading">Choose a status</p>
        <button v-for="item in statusOptions" :key="item.label" class="menu-item" @click="handleSelect(item)">
          {{ item.label }}
        </button>
      </div>
    </template>
  </OMenu>
</template>

Anchored Menu (Fixed Coordinates)

<template>
  <OMenu
    ref="anchoredMenuRef"
    trigger-type="click"
    :fixed-x="anchoredPosition.x"
    :fixed-y="anchoredPosition.y"
    :match-trigger-width="false"
  >
    <template #trigger>
      <button class="menu-trigger" @click="moveAnchor">
        Pin near viewport center
      </button>
    </template>
    <template #content>
      <div class="menu-items">
        <div class="menu-item">This menu ignores the trigger position.</div>
        <div class="menu-item">Use fixedX/fixedY for global hotkeys, fab menus, etc.</div>
      </div>
    </template>
  </OMenu>
</template>

Programmatic Control & Custom Panel

<template>
  <OMenu
    ref="menuRef"
    trigger-type="click"
    placement="bottom-end"
    :menu-content-class="['menu-panel']"
  >
    <template #trigger>
      <button class="menu-trigger">Programmatic menu</button>
    </template>
    <template #content>
      <div class="menu-items">
        <div class="menu-item">Programmatic open/close via exposed methods.</div>
      </div>
    </template>
  </OMenu>

  <div class="menu-actions">
    <button @click="openMenu">Open</button>
    <button @click="closeMenu">Close</button>
  </div>
</template>