Popover Anchor Flip
A popover opens below its trigger, or flips above when space runs out — the arrow follows.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useId, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Popover Anchor Flip
*
* A row menu opens below the control that summoned it — unless the frame
* runs out of room, in which case it flips above and the arrow moves withAbout this pattern
Row actions, overflow menus and any panel that belongs to one control. The motion is two decisions made together: measure the room left below the trigger and cross to the other side only when it is genuinely roomier, then grow the panel out of the corner nearest that trigger so the tie back to what was clicked is never broken. The arrow is drawn inside the panel, so it flips with it rather than being repositioned separately. Springs stay near critical damping because a menu is read the instant it lands, and the scale starts high enough that the labels never look resized on the way in.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Sidebar navigation
A menu grows from the corner nearest its button and changes side close to a screen edge.
Related patterns
- Dropdown Menu OpenA menu unfolds from the corner of the control that opened it, with its items arriving a frame apart.
- Anchor Scroll HighlightJumping to a section briefly washes its background so the eye lands in the right place.
- Gallery Lightbox OpenThe pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.