# Overlays

v-overlay is the base for components that float over the rest of the page, such as v-menu and v-dialog. It can also be used on its own and comes with everything you need to create a custom popover component.

# Usage

In its simplest form, the v-overlay component will add a dimmed layer over your application.


# Activator

Overlays can be opened with v-model, or by clicking or hovering on an activator element. An activator is mandatory for the connected position strategy. The activator element (if present) will also be used by some transitions to slide or scale from the activator’s position instead of the middle of the screen.

Related props:

  • activator
  • activatorProps
  • openOnClick
  • openOnHover
  • openOnFocus
  • closeDelay
  • openDelay

# Activator prop

The simplest way of providing an activator. Can be a CSS selector to pass to document.querySelector(), a component instance, or a HTMLElement. The string "parent" is also accepted to automatically bind to the parent element.

<v-overlay activator="#id" />
<v-overlay activator=".class" />
<v-overlay :activator="elementRef" />
  <v-overlay activator="parent" />

# Activator slot

For more manual control, the slot can be used instead. props is an object containing all the relevant ARIA attributes and event handlers, and must be applied to the target element with v-bind for the component to work correctly.

  <template #activator="{ isActive, props }">
    <v-btn v-bind="props">Overlay is {{ isActive ? 'open' : 'closed' }}</v-btn>

# Position Strategies

# Static (default)


Overlay content is absolutely positioned to the center of its container by default.

# Connected


The connected strategy is used by v-menu and v-tooltip to attach the overlay content to an activator element.

anchor selects a point on the activator, and origin a point on the overlay content. The content element will be positioned so the two points overlap.

# Scroll Strategies

# Examples

# Props

# Contained

A contained overlay is positioned absolutely and contained inside its parent element.

# Misc

# Advanced

Using the v-hover, we are able to add a nice scrim over the information card with additional actions the user can take.

# Loader

Using the v-overlay as a background, add a progress component to easily create a custom loader.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.