import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'import { cva } from 'class-variance-authority'import { ChevronDown } from 'lucide-react'
import * as React from 'react'
import { cn } from '@/lib/utils'
const NavigationMenu = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.Root>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>>(({ className, children, ...props }, ref) => ( <NavigationMenuPrimitive.Root ref={ref} className={cn( 'relative z-10 flex max-w-max rounded-base font-heading border-border dark:border-darkBorder border-2 p-1 bg-main flex-1 items-center justify-center', className, )} {...props} > {children} <NavigationMenuViewport /> </NavigationMenuPrimitive.Root>))NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
const NavigationMenuList = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.List>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>>(({ className, ...props }, ref) => ( <NavigationMenuPrimitive.List ref={ref} className={cn( 'group flex flex-1 list-none items-center font-heading justify-center space-x-1', className, )} {...props} />))NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
const NavigationMenuItem = NavigationMenuPrimitive.Item
const navigationMenuTriggerStyle = cva( 'group inline-flex h-10 w-max items-center justify-center text-text rounded-md bg-main px-4 py-2 text-sm font-heading transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50',)
const NavigationMenuTrigger = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>>(({ className, children, ...props }, ref) => ( <NavigationMenuPrimitive.Trigger ref={ref} className={cn(navigationMenuTriggerStyle(), 'group', className)} {...props} > {children} {''} <ChevronDown className="relative top-[1px] ml-2 h-4 w-4 font-heading transition duration-200 group-data-[state=open]:rotate-180" aria-hidden="true" /> </NavigationMenuPrimitive.Trigger>))NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
const NavigationMenuContent = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>>(({ className, ...props }, ref) => ( <NavigationMenuPrimitive.Content ref={ref} className={cn( 'left-0 top-0 w-full bg-main font-heading data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto', className, )} {...props} />))NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
const NavigationMenuLink = NavigationMenuPrimitive.Link
const NavigationMenuViewport = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.Viewport>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>>(({ className, ...props }, ref) => ( <div className={cn('absolute left-0 top-full flex justify-center')}> <NavigationMenuPrimitive.Viewport className={cn( 'origin-top-center relative mt-1.5 font-heading h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-base border-2 border-border dark:border-darkBorder bg-main text-black data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]', className, )} ref={ref} {...props} /> </div>))NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
const NavigationMenuIndicator = React.forwardRef< React.ElementRef<typeof NavigationMenuPrimitive.Indicator>, React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>>(({ className, ...props }, ref) => ( <NavigationMenuPrimitive.Indicator ref={ref} className={cn( 'top-full z-[1] flex h-1.5 items-end font-heading justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', className, )} {...props} > <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-white" /> </NavigationMenuPrimitive.Indicator>))NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
export { navigationMenuTriggerStyle, NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport,}Here is the whole navigation-menu component:
'use client'
import * as React from 'react'import Link from 'next/link'
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle,} from '@/components/ui/navigation-menu'
import { cn } from '@/lib/utils'
const components: { title: string; href: string; description: string }[] = [ { title: 'Alert Dialog', href: 'https://ui.shadcn.com/docs/primitives/alert-dialog', description: 'A modal dialog that interrupts the user with important content and expects a response.', }, { title: 'Hover Card', href: 'https://ui.shadcn.com/docs/primitives/hover-card', description: 'For sighted users to preview content available behind a link.', }, { title: 'Progress', href: 'https://ui.shadcn.com/docs/primitives/progress', description: 'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.', }, { title: 'Scroll-area', href: 'https://ui.shadcn.com/docs/primitives/scroll-area', description: 'Visually or semantically separates content.', }, { title: 'Tabs', href: 'https://ui.shadcn.com/docs/primitives/tabs', description: 'A set of layered sections of content—known as tab panels—that are displayed one at a time.', }, { title: 'Tooltip', href: 'https://ui.shadcn.com/docs/primitives/tooltip', description: 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.', },]
export default function NavigationMenuDemo() { return ( <NavigationMenu className="z-[5] m750:max-w-[300px]"> <NavigationMenuList className="m750:max-w-[300px]"> <NavigationMenuItem> <NavigationMenuTrigger className="m750:max-w-[80px] m750:text-xs"> <span className="m750:hidden">Getting started</span> <span className="hidden m750:inline">Home</span> </NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-[500px] gap-3 p-6 lg:grid-cols-[.75fr_1fr] m750:w-[300px]"> <li className="row-span-3"> <NavigationMenuLink asChild> <a className="from-muted/50 to-muted flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b p-6 no-underline outline-none focus:shadow-md" href="https://ui.shadcn.com" > <div className="mb-2 mt-4 text-lg font-heading"> shadcn/ui </div> <p className="text-sm font-base leading-tight"> Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. </p> </a> </NavigationMenuLink> </li> <ListItem href="https://ui.shadcn.com/docs" title="Introduction"> Re-usable components built using Radix UI and Tailwind CSS. </ListItem> <ListItem href="https://ui.shadcn.com/docs/installation" title="Installation" > How to install dependencies and structure your app. </ListItem> <ListItem href="https://ui.shadcn.com/docs/primitives/typography" title="Typography" > Styles for headings, paragraphs, lists...etc </ListItem> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger className="m750:max-w-[80px] m750:text-xs"> Components </NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] "> {components.map((component) => ( <ListItem key={component.title} title={component.title} href={component.href} > {component.description} </ListItem> ))} </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <Link href="https://ui.shadcn.com/docs" legacyBehavior passHref> <NavigationMenuLink className={navigationMenuTriggerStyle()}> <span className="m750:max-w-[80px] m750:text-xs"> Documentation </span> </NavigationMenuLink> </Link> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> )}
const ListItem = React.forwardRef< React.ElementRef<'a'>, React.ComponentPropsWithoutRef<'a'>>(({ className, title, children, ...props }, ref) => { return ( <li> <NavigationMenuLink asChild> <a ref={ref} className={cn( 'hover:bg-accent block text-text select-none space-y-1 rounded-base border-2 border-transparent p-3 leading-none no-underline outline-none transition-colors hover:border-border dark:hover:border-darkBorder', className, )} {...props} > <div className="text-base font-heading leading-none">{title}</div> <p className="text-muted-foreground font-base line-clamp-2 text-sm leading-snug"> {children} </p> </a> </NavigationMenuLink> </li> )})ListItem.displayName = 'ListItem'xd