Prop	Default	Type
alignOffset	0	number An offset in pixels from the start or end alignment options.
as	'div'	AsTag | Component The element or component this component should render as. Can be overwritten by asChild.
asChild		boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
avoidCollisions	true	boolean When true, overrides the side andalign preferences to prevent collisions with boundary edges.
collisionBoundary	[]	Element | (Element | null)[] | null The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
collisionPadding	0	number | Partial<Record<'top' | 'right' | 'bottom' | 'left', number>> The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
forceMount		boolean Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
hideWhenDetached	false	boolean Whether to hide the content when the trigger becomes fully occluded.
loop		boolean When true, keyboard navigation will loop from last item to first, and vice versa.
prioritizePosition		boolean Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
sticky	'partial'	'partial' | 'always' The sticky behavior on the align axis. partial will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.

Emit	Payload
closeAutoFocus	[event: Event] Event handler called when auto-focusing on close. Can be prevented.
escapeKeyDown	[event: KeyboardEvent] Event handler called when the escape key is down. Can be prevented.
focusOutside	[event: FocusOutsideEvent] Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.
interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent] Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.
pointerDownOutside	[event: PointerDownOutsideEvent] Event handler called when the a pointerdown event happens outside of the DismissableLayer. Can be prevented.