127 Components
Morphing Mega Menu
NavigationStripe-style floating mega menu popover that fluidly glides across navigation links with spring physics, morphing width, height, and caret position synchronously.
PulseEnginev3.2
Stripe-style morphing popover
Core Infrastructure
Payments
Online card payments and multi-currency checkout
Billing
Smart subscription lifecycles and usage metering
Connect
Marketplace payouts and seller onboarding
Terminal
Custom in-person POS hardware and EMV tap
Radar Fraud Defense includedExplore all 24 products
Hover / Preview Target:
Stiffness (380):
Damping (30):
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/morphing-mega-menu.json"
Props
TypeScript props supported by <MorphingMegaMenu />.
| Prop | Type | Default | Description |
|---|---|---|---|
| stiffness | number | 380 | Spring stiffness coefficient for the morphing container and caret translation. |
| damping | number | 30 | Spring damping coefficient governing oscillation decay. |
| className | string | — | Optional CSS classes to append to the stage container. |
| embedded | boolean | — | Whether menu renders embedded within container rather than fixed top |
Key Features
- Single floating popover container that glides smoothly across nav items on hover or focus.
- Dynamic width, height, and horizontal offset calculation with Hooke's Law spring physics.
- Synchronized sliding top caret pointing directly to the active navigation item.
- Crossfading multi-column panels for Products, Solutions, and Developer tooling.
- Interactive stage controls to inspect stiffness, damping, and force-pinned previews.
Keyboard & Accessibility
- Uses accessible ARIA menubar and role attributes with aria-expanded status.
- Supports keyboard navigation and focus triggers across all nav links and panels.
- Graceful fallback without layout jumping when JavaScript or motion is reduced.