A mega-menu with one dropdown that glides and resizes between items, its content sliding in from the side you moved towards.
Usage
import { MenuLinks, MorphingMenu } from "@/components/motionkit/morphing-menu";
<MorphingMenu
items={[
{
label: "Product",
content: (
<MenuLinks
links={[
{ title: "Analytics", description: "Live numbers for every team.", href: "/analytics" },
{ title: "Automations", description: "Workflows that run themselves.", href: "/automations" },
]}
/>
),
},
{ label: "Resources", content: <MenuLinks columns={1} links={[{ title: "Docs", href: "/docs" }]} /> },
{ label: "Pricing", href: "/pricing" },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Panel glide and resize
Pointer moves to another item
Content slide
Pointer moves to another item
The main navigation of a product or marketing site with more than a handful of pages: products, solutions and resources, each with its own panel.
There's only ever one dropdown. When you move to another item, a layout effect measures that item's content and its trigger, then the shared panel springs to the new position and size while the old content slides out one way and the new content slides in from the side you moved towards. A short grace period keeps it open while the pointer crosses the gap. Keyboard users open a panel with Enter, Space or Down, which moves focus straight into it, and Escape closes it and returns focus to the trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | MorphingMenuItem[] | — | Each item's label, and either an href or the content for its panel. |
| label | string | "Main" | Accessible name for the nav landmark. |
| MenuLinks | component | — | A ready-made grid of titled links for a panel. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/morphing-menu. It saves the file to components/motionkit and installs its dependencies.
Morphing Menu is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, the panel fades in place: no gliding, resizing or sliding content.
Usage
import { MenuLinks, MorphingMenu } from "@/components/motionkit/morphing-menu";
<MorphingMenu
items={[
{
label: "Product",
content: (
<MenuLinks
links={[
{ title: "Analytics", description: "Live numbers for every team.", href: "/analytics" },
{ title: "Automations", description: "Workflows that run themselves.", href: "/automations" },
]}
/>
),
},
{ label: "Resources", content: <MenuLinks columns={1} links={[{ title: "Docs", href: "/docs" }]} /> },
{ label: "Pricing", href: "/pricing" },
]}
/>Motion
The exact curves this component runs, plotted with Motion's own maths.
Panel glide and resize
Pointer moves to another item
Content slide
Pointer moves to another item
The live preview is free to explore. Plus unlocks the source for Morphing Menu and every other premium component.