Overlay

Explore the live examples that also power your theme customizer.

8 components

Move toward the actions

overlay<span>

Affordance Scope

A lightweight interaction scope that lets nearby controls anticipate pointer movement without adding listeners or hit regions to every control.

@threadlabs/looma

Nearby actions

View component
Right-click this area
overlay<span>

Context Menu

Actions opened by right-click, long-press, or the keyboard menu key.

@threadlabs/looma

Target binding

View component

Send Fellowship memo?

Frodo and Sam will receive the updated route. Sméagol is keeping the meeting notes.

overlay<dialog>

Dialog

Overlay primitive that coordinates native dialog behavior with shared overlay stack rules.

@threadlabs/looma

Default

View component
First item
Second item
overlay<div>

Menu

Menu container primitive that manages focus and selection across ui-menu-item children.

@threadlabs/looma

Inline menu

View component
Sam has booked the quiet room. Frodo is bringing the maps.
overlay<span>

Popover

Non-modal overlay primitive with shared open/close lifecycle.

@threadlabs/looma

Trigger binding

View component
overlay<div>

Search Shell

A search dialog with query, results, status, and action regions.

@threadlabs/looma

Search commands

View component
overlay<div>

Toast Region

Toast Region stacks authored <ui-toast> children and messages added with the show-toast event or the --show-toast command.

@threadlabs/looma

Show a notification

View component
overlay<span>

Tooltip

Contextual overlay primitive that links descriptive content to a trigger element.

@threadlabs/looma

Target binding

View component