proNew382 lines · framer-motion

Navbar Mega Menu

One click opens the whole catalog. A top nav where one item opens a wide multi-column mega-menu panel with a featured promo card, and collapses into an accordion-style mobile menu under 768px.

Use it for: A marketing site or app shell that needs to surface a deep product or docs menu without a full page navigation drawer.
Themes: Light + dark
License: Commercial use

Live

Veyra

Get started

Overview

Everything your team builds, organized by workflow.

Projects, integrations and docs sit in the same catalog, so nothing lives in someone's head alone.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * A standard top nav where one item opens a wide multi-column mega-menu panel.
 * The panel is `absolute` under the nav row, clipped by the section's own rounded
 * frame (the section has `overflow-hidden`), keyboard accessible (Escape + outside
 * click close it) and collapses into an accordion-style mobile menu under 768px.
 */

interface MegaLink {
  label: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Clicking the megaLabel trigger toggles an absolute inset-x-0 top-full panel anchored to the nav row; the panel is clipped by the section's own overflow-hidden rounded frame so it never escapes the card.
→The panel animates in/out with framer-motion (fade + 8px slide) and is wrapped in AnimatePresence so it unmounts cleanly on close.
→Escape closes the open panel and returns focus to the trigger button; a document-level mousedown listener closes it on outside click.
→Selecting any link in the panel (column links or the featured card CTA) closes the menu immediately.
→Under the md breakpoint the desktop nav and mega panel are replaced by a hamburger-triggered mobile menu where the same trigger becomes an inline accordion row that expands/collapses its own flattened link list with a height animation.
→initialOpen lets the panel start open so the mega-menu content is visible without any interaction.

Accessibility

✓Trigger button has `aria-haspopup`, `aria-expanded` and `aria-controls` pointing at the panel id; panel links carry `role="menuitem"`.
✓Escape closes the panel and moves focus back to the trigger; outside click also closes it so focus never gets trapped.
✓Mobile hamburger button has a dynamic `aria-label` ("Open menu" / "Close menu") and `aria-expanded`.
✓All interactive elements are real `<button>`/`<a>` with the design system's visible focus styling; the mobile accordion panel is independently scrollable (`overflow-y-auto`) so long link lists stay reachable on short screens.
✓Honours prefers-reduced-motion.