Configuration: Positioning

Overlays can have two different placement modes: relative to their anchor element and relative to the viewport. Depending on screen size and viewing device, one placement mode might be suited better than the other.

Note that, the placementMode option has the values ‘local’ (anchor) and ‘global’ (viewport). These refer to their legacy position in dom (global overlays were put in the body of the page). Since overlays are built with the native <dialog> element, no content is moved around anymore, so their names are a bit less intuitive.

Relative to anchor

An anchor is usually the invoker button, it can also be a non interactive reference element. Anchor placement uses Popper under the hood. It supports 9 positions: top-start, top, top-end, right-start, right, right-end, bottom-start, bottom, bottom-end, left-start,left,left-end

Relative to viewport

Viewport placement uses the flexbox layout mode, leveraging the best browser capabilities when the content or screen size updates. Supported modes: center, top-left, top, top-right, right, bottom-right, bottom, bottom-left, left

placementMode

The placementMode property determines the positioning of the contentNode:

• next to its reference node: local
• relative to the viewport: global

Local

Global

popperConfig

Prop	Description	Type
placementMode	Determines the positioning anchor (viewport vs invokerNode/referenceNode)	‘global’|‘local’
viewportConfig	Viewport positioning configuration. Will be used when placementMode is ‘global’	{placement: ViewportPlacement}
popperConfig	Anchor positioning configuration. Will be used when placementMode is ‘local’
inheritsReferenceWidth	Will align contentNode with referenceNode for local overlays. Usually needed for dropdowns. ‘max’ will prevent contentNode from exceeding width of referenceNode, ‘min’ guarantees that contentNode will be at least as wide as referenceNode. ‘full’ will make sure that the invoker width always is the same.	‘max’ | ‘full’ | ‘min’ | ‘none’