Context Menu Open
The menu grows out of the point you pressed, from whichever corner keeps it on the surface.
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 {
Fragment,
useEffect,
useRef,
useState,
type MouseEvent as ReactMouseEvent,
} from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";About this pattern
A right-click menu whose origin is the press itself. The corner is chosen before anything animates: the open measures the pointer against the surface, decides whether the panel should extend right or left, down or up, and sets the transform origin to match — so near an edge the menu grows back toward the middle instead of starting to hang off and correcting itself, which is the visible mistake in most implementations. Growth is a few percent and no more, because the panel is text and a menu that scales up from nothing resizes every glyph in it on the way; the rows themselves only fade. Dismissal is quicker than the open, a catcher rather than a scrim takes the next press, and the row the menu belongs to stays marked so there is never a question of what it is acting on.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Design canvas
A command list that opens at the pointer and stays inside the canvas near an edge.
Related patterns
- Dropdown Menu OpenA menu unfolds from the corner of the control that opened it, with its items arriving a frame apart.
- Nested Menu DrillA submenu pushes the parent list aside inside the same panel, and the panel resizes to fit it.
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.