dropdown menu popover origin motion animate action menus add motion to select lists or popovers anchor a dropdown visually to its trigger dropdown menus feel detached from their trigger generic fade alone is too weak for app UI menu entry should imply direction and origin
Dropdown Origin Shift
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/dropdown-origin-shift.json Preview
Background
Customize
Quick Start
<div class="dropdown-origin-shift" data-state="open" data-side="left">...</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 967 bytes · 38 lines
- Custom Properties
-
--dropdown-shift-x--dropdown-shift-y--dropdown-scale--dropdown-duration--dropdown-ease - Classes
-
.dropdown-origin-shift
dropdown menu popover origin motion
Use .dropdown-origin-shift on the menu or panel element. Add data-state="open" when visible and optionally data-side="left" if the panel should feel anchored from the opposite corner.