Vuance UI Kit

Overlays

Menu

Anchored action surface with stack, focus, keyboard, and outside-click behavior.

Menu

Playground

Configure the baseline public contract and copy synchronized Vue markup.

Interactive preview

Changes are reflected in the example and source.

Open menu

Properties

Open

Anchored

Backdrop closes

Origin

Vue

<div>
  <m-button
    @click="open = !open"
  >
    Open menu
  </m-button>
  <m-menu
    absolute
    close-on-backdrop
    origin="top left"
    v-model="open"
  >
    <button
      type="button"
      class="ui-menu__item"
    >
      Duplicate
    </button>
    <button
      type="button"
      class="ui-menu__item"
    >
      Archive
    </button>
  </m-menu>
</div>

MMenu API

Props, slots, and events are extracted from the current public UI Kit contract.

MMenu

Overlay family
src/runtime/components/ui/menu

Props

NameTypeDefault
closeOnBackdrop
booleantrue
absolute
booleanfalse
origin
'top left' | 'top right' | 'bottom left' | 'bottom right' | 'center' | 'top' | 'bottom''top left'
matchWidth
booleanfalse
anchorElement the surface is positioned against. Defaults to the menu's parent element, which is right whenever the parent *is* the trigger. A composite field is the case where it is not: its box also holds the label and the support line, so anchoring to it drops the menu below the helper text with a gap the size of that line. Such a consumer passes the drawn container instead.
HTMLElement | nullnull

Slots

Events

@click-outsidevoid