design-infraReport a problem or share feedback← Catalog
Menu dropdown
curatedfreetransitions/menu-dropdown
Contextual menus, dropdowns, popovers — anything that opens from a trigger and should visually grow from that trigger's position. Origin-aware via `data-origin` (top-left, top-center, top-right, bottom-*).
$
npx skills add Jakubantalik/transitions.dev # then ask: "apply the menu-dropdown transition"Our notes
Dropdown origin-aware scale/fade.- Source
- transitions.dev
- Kind
- transition
- Categories
- transition, navigation
- Use as
- recipe — technique you apply to your own markup
- Applies to
- navigationmodal
- Motion
- on state · subtle · css · low cost · respects reduced motion
- Tags
- css
- Licence
- Free for unlimited personal/commercial use in your products; no republishing the collection. Pro (React/TS variants) $9/mo or $149 lifetime.
- Live demo
- transitions.dev
- Docs
- transitions.dev
Similar
Compare all 4 →- Blur Glide Menumicrokit/blur-glide-menuNested menu (role=menu/menuitem, aria-haspopup, back button) where the outgoing step blurs then glides aside while the surface animates to the incoming step's height — a CSS-keyframe take on the multi-view drawer. motion-reduce shortens every transition. Demo data and colours are hard-coded.
- Modal open / closetransitions/modalScale-from-center modal open/close timings that feel native.
- Clerk: User Buttonmotion/clerk-user-buttonA custom Clerk user button built with Motion. The closed avatar expands into an account menu, using Motion's resize() util to animate the container to the menu's measured height.