Getting Started
Templates
Components
React.ReactNode"FF" |
| Logo element to display |
actions | ActionButton[] | Search + Cart | Action buttons (search, cart, etc.) |
className | string | undefined | Additional CSS classes for the header |
delayDuration | number | 120 | Delay before menu opens on hover (ms) |
skipDelayDuration | number | 0 | Delay to skip when moving between items (ms) |
onSearch | () => void | undefined | Callback when search action is triggered |
onCartClick | () => void | undefined | Callback when cart action is triggered |
| Property | Type | Description |
|---|---|---|
title | string | Menu item title |
section | MegaSection | Mega menu content |
| Property | Type | Description |
|---|---|---|
topLabel | string | Label above primary links |
primary | MenuLink[] | Large primary links (left column) |
columns | MenuColumn[] | Grouped links (right columns) |
| Property | Type | Description |
|---|---|---|
title | string | Link text |
href | string | Link destination |
target | string | Optional link target (e.g., "_blank") |
| Property | Type | Description |
|---|---|---|
icon | React.ReactNode | Icon to display |
label | string | Aria label for accessibility |
onClick | () => void | Click handler |
prefers-reduced-motion preferenceimport { AppleMegaNav, NAV_ITEMS } from "@/components/ui/apple-mega-nav"
export default function Layout() {
return <AppleMegaNav items={NAV_ITEMS} />
}import Image from "next/image"
<AppleMegaNav
logo={<Image src="/logo.svg" alt="Logo" width={32} height={32} />}
items={myNavItems}
/><AppleMegaNav
items={navItems}
onSearch={() => setSearchOpen(true)}
onCartClick={() => router.push("/cart")}
/>import { Bell, User } from "lucide-react"
<AppleMegaNav
items={navItems}
actions={[
{ icon: <Bell className="h-4 w-4" />, label: "Notifications", onClick: handleNotifications },
{ icon: <User className="h-4 w-4" />, label: "Profile", onClick: handleProfile },
]}
/>