Dropdown Menu Open
A menu unfolds from the corner of the control that opened it, with its items arriving a frame apart.
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, useRef, useState } from "react";
import {
AnimatePresence,
motion,
useReducedMotion,
type Variants,
} from "motion/react";
About this pattern
The most-used overlay in any product, and the one where a wrong transform origin is instantly noticeable: the menu has to grow out of the corner it hangs from, or it reads as a panel that happened to appear nearby. So transformOrigin follows the alignment, the surface travels only a few percent, and the spring is damped hard enough that it never passes its resting size — an overshooting menu drags every label in it past full size and back. The items are staggered by a couple of frames each and start before the surface has settled, which makes the whole thing read as one gesture rather than a box followed by a list. They leave together, though: a staggered exit looks like the menu is being dismantled. Keyboard focus moves with the cursor and returns to the control on Escape.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Code review
The overflow menu unfolds from the control it hangs off.
Related patterns
- Popover Anchor FlipA popover opens below its trigger, or flips above when space runs out — the arrow follows.
- Breadcrumb Trail AppendGoing one level deeper slides a new crumb in from the right while the trail behind it recedes.
- Context Menu OpenThe menu grows out of the point you pressed, from whichever corner keeps it on the surface.