Mega Menu Reveal Navbar
A free mega menu navbar component for React: full-width panels reveal under the bar with staggered link groups and a smooth height morph between panels.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- Motion
- 2 runtime packages
Mega Menu Reveal Navbar is a free mega menu react component for Next.js, built with Motion and Tailwind. Each mega trigger is a real button that reveals a full-width panel under the bar with a top-to-bottom clip-path reveal, while the link groups rise into place 40 milliseconds apart on a soft spring. Switching from one open trigger to another crossfades the panels and glides the container between the two measured panel heights, so the menu never snaps between sizes.
The component follows the disclosure pattern rather than role menu: triggers carry aria-expanded and aria-controls, panel links are real anchors with descriptions as plain text, and only one panel is ever open. It closes on Escape with focus returned to the trigger, on a click outside, when focus leaves the header, and when a link is selected. Fine pointers open with a 120 millisecond hover intent delay while click always toggles, so touch and keyboard need no hover at all. Below the lg breakpoint the items move into a native dialog drawer where mega items become disclosure sections, and with prefers-reduced-motion enabled every panel becomes a 150 millisecond opacity fade with no clip-path, no stagger and an instant height.
End of the demo page. Back to the top to try the panels again.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/nav-mega-revealUsage
import { NavMegaReveal } from "@/components/nav-mega-reveal";
export default function Page() {
return (
<>
<NavMegaReveal
logo={<a href="/">Acme</a>}
items={[
{
label: "Products",
groups: [
{
heading: "Build",
links: [
{
label: "Components",
description: "Animated sections ready to paste in",
href: "/components",
},
{ label: "Templates", href: "/templates" },
],
},
],
},
{ label: "Pricing", href: "/pricing" },
]}
cta={{ label: "Get started", href: "/signup" }}
/>
<main>...</main>
</>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | required | Left slot: brand link or image. |
| items | ({ label: string; href: string } | { label: string; groups: { heading: string; links: { label: string; description?: string; href: string }[] }[] })[] | required | Plain links and mega-panel triggers, mixed, rendered in order. Items with groups become triggers; items with href become plain anchors. |
| cta | { label: string; href: string } | undefined | Optional right-side CTA button rendered with inverted tokens. |
| className | string | undefined | Additional classes merged onto the header. |
Customisation
Mega Menu Reveal Navbar declares no tokens of its own. The bar, panels and drawer consume the global semantic tokens through Tailwind utilities, the drawer disclosures run on the shared --dur-2 and --ease-out-quart tokens, and the panel reveal, height morph and drawer slide all use the shared springSoft preset from lib/motion.ts, so retuning that preset retunes the whole menu. The className prop is merged onto the header, which is the usual place to change its stacking or surface:
:root {
--dur-2: 250ms;
}
<NavMegaReveal
logo={<a href="/">Acme</a>}
items={items}
className="z-50"
/>Frequently asked questions
- Is Mega Menu Reveal Navbar free for commercial use?
- Yes. Mega Menu Reveal Navbar is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Mega Menu Reveal Navbar accessible for keyboard and screen reader users?
- Yes. It follows the disclosure pattern rather than role menu: every trigger is a real button with aria-expanded and aria-controls, panel links are real anchors with visible focus rings, and descriptions are plain text. Escape closes the open panel and returns focus to its trigger, focus leaving the header closes it without stealing focus, and click or Enter always toggles so no interaction depends on hover. Below the lg breakpoint the drawer is a native dialog opened with showModal, so the browser provides the focus trap and focus return, and mega items become disclosure sections whose collapsed content leaves the Tab order.
- How does the panel animation behave, and what about reduced motion?
- Opening reveals the panel with a top-to-bottom clip-path inset plus opacity on a soft spring, with link groups staggered 40 milliseconds apart. Switching between two open triggers crossfades the panels while the shared wrapper animates between the measured panel heights, a deliberate, spec-mandated exception to the transform-only rule that never reflows the page because the wrapper is an absolutely positioned overlay. With prefers-reduced-motion enabled panels appear and disappear with 150 millisecond opacity fades only: no clip-path, no stagger, and the height changes instantly.