BlogPlaygroundOne

VMenu API

ads via vuetify

Props
name
type
default
activator
Element | (string & {}) | 'parent' | ComponentPublicInstance

undefined

Explicitly sets the overlay’s activator.

activator-props
unknown

{}

Apply custom properties to the activator.

attach
string | boolean | Element

false

Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator.

capture-focus
New in v3.11.0
boolean

true

When enabled, focus will be trapped within the component’s content, preventing Tab navigation from moving focus outside. Useful for modals, dialogs, and overlays to maintain accessibility.

close-delay
string | number

250

Milliseconds to wait before closing component. Only works with the open-on-hover prop.

close-on-back
boolean

true

Closes the overlay content when the browser’s back button is pressed or $router.back() is called, cancelling the original navigation. persistent overlays will cancel navigation and animate as if they were clicked outside instead of closing.

close-on-content-click
boolean

true

Designates if menu should close when its content is clicked.

contained
boolean

false

Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).

content-class
any

undefined

Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the v-app component (unless the attach prop is provided) and is not targetable by classes passed directly on the component.

content-props
any

undefined

Apply custom properties to the content.

disabled
boolean

false

Removes the ability to click or target the component.

disable-initial-focus
boolean

false

Deprecated, use capture-focus instead. Prevents automatic redirect of first focusin event. Intended to use on permanently open menus or VSpeedDial.

eager
boolean

false

Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

height
string | number

undefined

Sets the height for the component.

id
string

undefined

The unique identifier of the component.

location
Anchor

undefined

Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both…

location-strategy
'static' | 'connected' | LocationStrategyFunction

'connected'

A function used to specifies how the component should position relative to its activator.

max-height
string | number

undefined

Sets the maximum height for the component.

max-width
string | number

undefined

Sets the maximum width for the component.

min-height
string | number

undefined

Sets the minimum height for the component.

min-width
string | number

undefined

Sets the minimum width for the component. Use auto to use the activator width.

model-value
boolean

false

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

no-click-animation
boolean

false

Disables the bounce effect when clicking outside of the content element when using the persistent prop.

offset
string | number | number[]

undefined

Increases distance from the target. When passed as a pair of numbers, the second value shifts anchor along the side and away from the target.

opacity
string | number

undefined

Sets the opacity of the scrim element. Only applies if scrim is enabled.

open-delay
string | number

300

Milliseconds to wait before opening component. Only works with the open-on-hover prop.

open-on-click
boolean

undefined

Designates whether menu should open on activator click.

open-on-focus
boolean

undefined

Activate the component when the activator is focused.

open-on-hover
boolean

false

Designates whether menu should open on activator hover.

origin
Anchor | 'auto' | 'overlap'

'auto'

Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.

persistent
boolean

false

Clicking outside of the element or pressing esc key will not deactivate it.

retain-focus
New in v3.11.0
boolean

false

Captures and keeps focus within the content element when using Tab and Shift+Tab. Recommended to be false when using external tools that require focus such as TinyMCE or vue-clipboard.

scrim
string | boolean

false

Accepts true/false to enable background, and string to define color.

scroll-strategy
'close' | 'block' | 'none' | 'reposition' | ScrollStrategyFunction

'reposition'

Strategy used when the component is activate and user scrolls.

stick-to-target
New in v3.10.0
boolean

false

Enables the overlay content to go off-screen when scrolling.

submenu
New in v3.7.0
boolean

false

Opens with right arrow and closes on left instead of up/down. Implies location="end". Directions are reversed for RTL.

target
  | Element
  | (string & {})
  | 'parent'
  | 'cursor'
  | ComponentPublicInstance
  | [number, number]

undefined

For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.

theme
string

undefined

Specify a theme for this component and all of its children.

transition
  | string
  | boolean
  | (TransitionProps & { component: Component })
  | {
      component: ComponentPublicInstanceConstructor<
        CreateComponentPublicInstanceWithMixins<
          {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {
            $children?:
              | VNodeChild
              | { $stable?: boolean | undefined }
              | (() => VNodeChild)
              | { default?: (() => VNodeChild) | undefined }
            'v-slots'?:
              | { default?: false | (() => VNodeChild) | undefined }
              | undefined
          } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
          () => JSX.Element,
          unknown,
          {},
          {},
          ComponentOptionsMixin,
          ComponentOptionsMixin,
          Record<string, any>,
          PublicProps,
          {},
          true,
          {},
          SlotsType<Partial<MakeSlots<{ default: never }>>>,
          GlobalComponents,
          GlobalDirectives,
          string,
          {},
          any,
          ComponentProvideOptions,
          OptionTypesType<{}, {}, {}, {}, {}, {}>,
          {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {
            $children?:
              | VNodeChild
              | { $stable?: boolean | undefined }
              | (() => VNodeChild)
              | { default?: (() => VNodeChild) | undefined }
            'v-slots'?:
              | { default?: false | (() => VNodeChild) | undefined }
              | undefined
          } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
          () => JSX.Element,
          {},
          {},
          {},
          {}
        >,
        any,
        any,
        any,
        ComputedOptions,
        MethodOptions
      > &
        ComponentOptionsBase<
          {} & { target?: HTMLElement | [x: number, y: number] | undefined } & {
            $children?:
              | VNodeChild
              | { $stable?: boolean | undefined }
              | (() => VNodeChild)
              | { default?: (() => VNodeChild) | undefined }
            'v-slots'?:
              | { default?: false | (() => VNodeChild) | undefined }
              | undefined
          } & { 'v-slot:default'?: false | (() => VNodeChild) | undefined },
          () => JSX.Element,
          unknown,
          {},
          {},
          ComponentOptionsMixin,
          ComponentOptionsMixin,
          Record<string, any>,
          string,
          {},
          {},
          string,
          SlotsType<Partial<MakeSlots<{ default: never }>>>,
          GlobalComponents,
          GlobalDirectives,
          string,
          ComponentProvideOptions
        > &
        VNodeProps &
        AllowedComponentProps &
        ComponentCustomProps & {
          filterProps: (props: T) => Partial<Pick<T, U>>
        }
    }

{component: {name: 'VDialogTransition'}}

Sets the component transition. Can be one of the built in or custom transition.

viewport-margin
New in v3.11.0
string | number

12

Sets custom viewport margin for the overlay content

width
string | number

undefined

Sets the width for the component.

z-index
string | number

2000

The z-index used for the component.

Events
name
type
update:modelValue
[boolean]

Event that is emitted when the component’s model changes.

Slots
{ isActive: boolean props: Record<string, any> targetRef: TemplateRef }
{ isActive: Ref<boolean, boolean> }
activator

When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.

default

The default Vue slot.

Exposed
HTMLElement
() => void
HTMLElement
boolean
string
boolean
HTMLElement
HTMLElement
HTMLElement | [number, number]
(e: Event) => void
activatorEl

Ref to the current activator element.

animateClick

Function invoked when user clicks outside.

contentEl

Ref to the current content element.

globalTop

Used by activator to determine a components position in the global stack order.

id

The unique identifier of the component.

localTop

Used by activator to determine a components position in the local stack order.

rootEl

Ref to the root v-overlay element.

scrimEl

Ref to the current scrim element.

target

Ref to the current target element.

updateLocation

Function used for locationStrategy positioning.

SASS Variables
name
default
$menu-content-border-radius
settings.$border-radius-root
$menu-elevation
3