Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
pnpm dlx shadcn@latest add @ruixenui-pro/apple-mega-nav| Prop | Type | Default |
|---|
| Description |
|---|
items | NavItem[] | NAV_ITEMS | Navigation items to display |
logo | 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 preference