Multi-Level Drawer Menu
A drawer menu with two panels. The first slides in, and if a category has sub-links, hovering it opens a second panel next to it. The page behind dims while the menu stays clickable, and on phones it turns into a tap-through drill-down.
One of 71 GSAP components in React, Vue and HTML.
On mobile
Multi-Level Drawer Menu is in the free Starter Pack.
This exact component in React, Vue and HTML, in your inbox, ready when you're back at your desk. No card, no trial.
How it's built.
The hover was what ate most of my time. It's a two-panel drawer - hover a category and a second panel opens next to it with the sub-links - and there's a small gap between the two panels, so when you move diagonally toward the second one you drift across that gap for a few frames and the menu kept slamming shut right as you reached for it. It drove me insane. The fix was two small things: it waits a moment before it's allowed to close, and it looks at where your cursor is heading instead of just where it left, so you can cut the corner and it holds open for you. The other bit I only got after a few bad versions is to open the panel first and let the links come in a beat later. Firing it all at once just felt cheap and cluttered.
The rest is yours. Drop in your own categories and links, change the colours, and set how fast it all moves. The close doesn't just reverse the open, it has its own tiny details to feel more responsive when users want to keep browsing the site.
What you'll need.
Install
- GSAP
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Multi-Level Drawer Menu work with React and Vue?
- Multi-Level Drawer Menu ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Multi-Level Drawer Menu?
- Yes. Multi-Level Drawer Menu is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Multi-Level Drawer Menu without editing code?
- Multi-Level Drawer Menu exposes 3 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Multi-Level Drawer Menu free?
- Multi-Level Drawer Menu is one of the free components. It is delivered as part of the Starter Pack ZIP by email - React, Vue, and HTML included, no expiration, no attribution.
- Can I use Multi-Level Drawer Menu in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Multi-Level Drawer Menu on as many projects as you build, with no attribution required.
- Does Multi-Level Drawer Menu respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
