A top bar whose triggers open a wide mega menu with three columns of icon links, a featured card and a footer strip. Opens on hover with an intent delay and is fully keyboard driven.
npx shadcn@latest add https://hyperblur.dev/r/nav-mega-menu.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-mega-menu.tsx.
import { NavMegaMenu } from "@/components/hyperblur/nav-mega-menu"
<NavMegaMenu brand="Lumen" showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Lumen" | Product name next to the logo mark. |
| menus | NavMegaMenuEntry[] | Product, Solutions, Developers, Pricing, Customers | Top level entries. An entry with columns opens a mega panel; one with only href is a plain link. Each entry can add a featured card and footer links. |
| signIn | { label: string; href: string } | null | { label: "Sign in", href: "#" } | Quiet link on the right. Pass null to hide it. |
| cta | { label: string; href: string } | null | { label: "Start free", href: "#" } | Primary pill button on the right. Pass null to hide it. |
| accent | string | "#8b5cf6" | Color of the logo mark, icon hover states, badges, the featured glow and focus rings. |
| openId | string | null | Controlled id of the open menu. Pair with onOpenChange. | |
| defaultOpenId | string | null | null | Menu that starts open when uncontrolled. |
| onOpenChange | (id: string | null) => void | Called when a menu opens, switches or closes. | |
| hoverDelay | number | 120 | Milliseconds the pointer must rest on a trigger before the first menu opens. Moving between triggers switches instantly. |
| showBackdrop | boolean | true | Render a faded page fragment under the bar for previews. Turn it off in a real layout. |