'use client'; import * as React from 'react'; import { motion } from 'motion/react'; import { ChevronDown } from 'lucide-react'; import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'; const items = [ { label: 'Products', content: [ { title: 'UI Components', desc: 'Reusable modern components' }, { title: 'Templates', desc: 'Pre-built layouts for apps' }, { title: 'Icons', desc: 'Clean icon system' }, ], }, { label: 'Developers', content: [ { title: 'Documentation', desc: 'Guides and API references' }, { title: 'CLI', desc: 'Tooling for faster setup' }, { title: 'Changelog', desc: 'Latest updates and fixes' }, ], }, { label: 'Company', content: [ { title: 'About', desc: 'Learn about our mission' }, { title: 'Careers', desc: 'Join our team' }, { title: 'Blog', desc: 'Insights and articles' }, ], }, { label: 'Resources', content: [ { title: 'Community', desc: 'Connect with others' }, { title: 'Support', desc: 'Get help quickly' }, { title: 'Status', desc: 'System uptime' }, ], }, ]; export default function NavigationMenu() { return ( {items.map((item) => ( {item.label} {item.content.map((sub) => (

{sub.title}

{sub.desc}

))} ))} ); }

Navigation Menu

Installation

Usage