# Morphing Menu

> A mega-menu with one dropdown that glides and resizes between items, its content sliding in from the side you moved towards.

Category: Navigation · MotionKit Plus · Updated 2026-10-22 · Live demo: https://motionkitui.com/components/morphing-menu

## When to use it

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.

## How it works

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.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/morphing-menu` after adding their registry token from https://motionkitui.com/account.

## Props

| 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. |

## Accessibility

- **Keyboard: Pass.** Triggers are buttons: Enter, Space or Down opens a panel and moves focus into it, Left and Right move between items, Escape closes and returns focus.
- **Screen readers: Pass.** A labelled nav landmark; each trigger announces whether its panel is expanded and which panel it controls.
- **Reduced motion: Pass.** With reduced motion on, the panel fades in place: no gliding, resizing or sliding content.
- **Colour contrast: Pass.** Menu text measures 13.4:1 and link descriptions 7.1:1 on the panel.