Skip to content

Overlays

Popover & Menu

Anchored surfaces with flipping, viewport clamping and origin-aware entrance; Menu adds roving focus.

Popover Menu MenuItem
import { Popover, Menu, MenuItem } from '@anomalia/ui';

Notes

  • Positioned fixed from viewport coordinates, so transformed and overflow: hidden ancestors cannot clip it.
  • Menu supports arrows, Home/End, type-ahead and Tab-to-close.
  • matchWidth makes the surface as wide as its anchor — the right default for select-like menus.

Examples

Popover

Positioned from viewport coordinates, so transformed and overflow-hidden ancestors cannot clip it. It flips when the preferred side does not fit.

Menu

Menu adds the ARIA menu pattern on top of Popover: arrows, Home/End, type-ahead and Tab-to-close, with focus landing on the first item.

API

Popover

PropTypeDefaultDescription
openbooleanBindable visibility.
anchorHTMLElement | nullElement to position against.
placement'top' | 'bottom' | 'left' | 'right' (+ '-start' / '-end')'bottom-start'Preferred side; flips when it does not fit.
offsetnumber8Gap from the anchor.

MenuItem

PropTypeDefaultDescription
hrefstringRenders a link, keeping middle-click behaviour.
tone'default' | 'danger''default'Destructive styling.
selected / shortcutboolean / stringCheck mark and keyboard hint.

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.