Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA data-driven header menu with wide panels of grouped, described links, an optional featured card, and an accordion list for small screens.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { MegaMenu, MegaMenuMobileList } from "@/components/ui/mega-menu"const items = [
{
label: "Product",
columns: [
{
title: "Build",
links: [
{ title: "Workspaces", href: "/workspaces", icon: <Layers /> },
{ title: "API", href: "/api", description: "Build on the same data." },
],
},
],
featured: {
title: "What's new",
description: "See the latest releases.",
href: "/changelog",
media: <Sparkles />,
},
},
{ label: "Pricing", href: "/pricing" },
]
<MegaMenu items={items} />
<MegaMenuMobileList items={items} className="md:hidden" />| Prop | Type | Default | Description |
|---|---|---|---|
items | MegaMenuItem[] | - | Top-level entries: a link (href) or a panel (columns, featured). |
label | string | "Main" | Accessible name of the navigation landmark. |
viewportAlign | "start" | "center" | "center" | Lines the dropdown panel up with the start of the menu or centers it. |
Also accepts the Navigation Menu root props.
| Prop | Type | Default | Description |
|---|---|---|---|
items | MegaMenuItem[] | - | The same items, shown as disclosure sections. |
onNavigate | () => void | - | Called when a link is chosen, for example to close a sheet. |
| Field | Type | Description |
|---|---|---|
title | string | Link title. |
href | string | Destination. |
description | string | One line under the title. |
icon | ReactNode | Icon shown in a tile. |
badge | string | Small label after the title. |
MegaMenu is hidden below the md breakpoint; put MegaMenuMobileList in your mobile menu.<details> elements, so it works without JavaScript.