"use client"; import * as React from "react"; import { NavigationMenu as NavPrimitive } from "radix-ui"; import { cn } from "@kineticui/core"; import { ChevronDownIcon } from "@kineticui/icons"; export type MegaMenuLink = { title: string; description?: string; href: string; icon?: React.ReactNode }; export type MegaMenuItem = { label: string; href?: string; /** Columns of links shown in the panel. */ columns?: { heading: string; links: MegaMenuLink[] }[]; /** Highlight card on the right of the panel. */ feature?: React.ReactNode; }; export type MegaMenuProps = { items: MegaMenuItem[]; className?: string }; /** Website navigation with large dropdown panels. Keyboard and screen-reader friendly. */ export function MegaMenu({ items, className }: MegaMenuProps) { return ( {items.map((item) => item.columns ? ( {item.label}

{item.columns.map((col) => (

{col.heading} {col.links.map((l) => ( {l.icon ? {l.icon} : null} {l.title} {l.description ? {l.description} : null} ))}

))} {item.feature ?

{item.feature}

: null}

) : ( {item.label} ), )}

); }

Mega Menu

Installation

Exports