Landmark Kit

Menu Kit

Every site has one, and it is the first thing anyone touches. Ten complete navigation surfaces, each one art-directed on its own, all built on the same contract.

One-time
yourstudio.com
The stage
Pick a menu and click its trigger. The page behind it never changes, so the only thing you are comparing is the menu. Switch the stage to phone to check the mobile behaviour, which is where most menus quietly fall apart.
Coverage
The useful question is not which effect you like, it is what your layout can survive. A site with a pinned hero cannot take a menu that shoves the page down. One with a live canvas behind it should not be covered. The Kit has all four, so the answer is already in it.
Cover the pageThe menu takes the whole viewport. The page is still there, underneath, untouched.
  • Accordion
  • Preview Index
  • Curtain
  • Tile Grid
  • Split Screen
Move the pageNo overlay. The page itself gets tilted or pushed aside to make room.
  • Context Shift
  • Push-Down
Float beside itNon-modal. The menu opens as its own surface and the page keeps running behind it.
  • Island
  • Pillar
Drill into itFor deep navigation. Levels stack instead of replacing each other, so the path stays visible.
  • Stacked Drawer
The hard part
Focus, scroll, SEO, keyboards, interrupts - navigation is the one component where the animation is the easy half. The Kit's contract handles the other half the same way in all ten, so you don't re-audit it per menu.
Your nav never leaves the DOMA closed menu is visibility: hidden plus inert - never display: none. Crawlers and screen readers get the full navigation whether the menu has ever been opened or not.
Real dialog semanticsModal surfaces carry role="dialog" and aria-modal, the trigger tracks aria-expanded, focus moves in on open and returns to the trigger on close. Escape closes, always, immediately.
Scroll lock that finds your scrollerThe lock targets the layout's actual scroll source - Lenis when present, the real scroller otherwise - instead of blindly freezing the body and hoping.
Reduced motion, same menuWith prefers-reduced-motion the open completes in under 150ms and content lands settled. Functionality is identical - nobody gets a lesser menu.
GPU properties onlyTransforms, opacity, clip-path. No width or height tweens, no layout thrash, no per-frame DOM reads. Surfaces that grow are clipped or scaled, not resized.
One motion languageEvery menu opens on the same easing family and closes on the house state curve, with content exiting first and the surface retracting through its tail. Ten designs, one hand.
The code
Everything lives inside it: the trigger, the surface, the choreography, the accessibility floor. Pass your page in as children, wire the callbacks you need, ship it. React, Vue, and plain HTML - GSAP only, nothing else to install.
Component.jsx
Pricing
No subscription, no seats, no renewal. The whole Kit, owned.
Menu Kit

EUR 149

One-time. No subscription, no seats.

  • All ten menus, in React, Vue and HTML / CSS / JS
  • Perpetual license, unlimited commercial projects
  • Lifetime updates to this Kit, at no extra cost
  • One contract across all ten - same props, same events, same accessibility floor
Library members get 20% off every Kit, for as long as the subscription is active.

Questions

Everything worth knowing before you own the Kit.

No. The Menu Kit is a stand-alone product, bought once and owned forever. The Library is a separate yearly subscription, billed and accessed independently from any Kit.

The Menu Kit ships in React, Vue, and plain HTML / CSS / JS. It is not built for Webflow.

The Library goes broad; this Kit goes deep. Every menu here is authored as part of one navigation system - same props, same events, same accessibility floor - so swapping one menu for another is a component swap, not a re-integration. Nothing in the Kit is unlocked by a Library subscription.

Yes - that is what the Kit is organized around. Four menus cover the page, three move it, two float beside it, and one drills into deep navigation, so there is a menu for whatever your layout can take. Your page passes in as children; the menu never dictates your markup.

Every menu keeps your nav links in the DOM while closed (visibility plus inert, never display: none), traps and returns focus, closes on Escape, locks scroll against the real scroller, and completes near-instantly under prefers-reduced-motion. That floor is part of the shared contract, not per-menu effort.

GSAP, and nothing else. No Three.js, no component framework beyond the one you already use. GSAP is free, including every plugin.

Yes. One purchase gives you a perpetual license plus every future update to the Kit at no extra cost. Nothing renews and nothing expires.

Yes. The license covers unlimited commercial and client projects. The only thing you cannot do is repackage or resell the components as a competing product.

After purchase the Kit lives in your account, separate from the Library. You can browse and copy every component in the app, or download the whole Kit as a ZIP.

Yes. Library members get 20% off every Kit for as long as the subscription is active. Buy a Kit first and you get 20% off your first year of any Library plan.

The Menu Kit has a 14-day, no-questions-asked refund. If it does not fit how you work, email us within 14 days of purchase for a full refund.

MenuEUR 149
One purchase, every project, forever.