Overlay

The Overlay component allows you to show additional content when the user clicks on a particular element in the UI. The Overlay is placed at the border of its trigger element. To define a UI element as a trigger, use the useOverlayWithTrigger hook. The Overlay only exists in a controlled manner, so the isOpen prop must be updated by the developer.

OverviewProperties

Import

import { Overlay } from '@dynatrace/strato-components-preview/overlays';

UseCases

CodeSandbox

Control appearance

Use placement in the overlayProps to set the overlay's position relative to its trigger element. To influence the space between the trigger element and the overlay, change the offset.

Set the widthStrategy to control the width of the overlay. Values can be min and max in pixels, 'content' or 'trigger'.

CodeSandbox

Trap focus

If you want to trap the focus inside the overlay, you can use the trapFocus option of the useOverlayWithTrigger hook. Note that the focus will be trapped, regardless of any focusable children being present in the overlay. If you don't have focusable children in the overlay, make sure not to trap the focus so keyboard users can still dismiss the overlay and continue navigating the page.

CodeSandbox

Dynamic content

If you have dynamic content in the overlay that is changing from including focusable children at first to no more focusable children being present in the end, you need to make sure to also handle trapping the focus accordingly. As long as you include focusable children, you can have the focus trapped in the overlay. As soon as there are no more focusable children in the overlay, you must not trap the focus anymore to avoid keyboard traps.

CodeSandbox