import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"; import { cva } from "class-variance-authority"; import { ChevronDownIcon } from "lucide-react"; import type * as React from "react"; import { cn } from "@/lib/utils"; function NavigationMenu({ className, children, viewport = true, ...props }: React.ComponentProps & { viewport?: boolean; }) { return ( {children} {viewport && } ); } function NavigationMenuList({ className, ...props }: React.ComponentProps) { return ( ); } function NavigationMenuItem({ className, ...props }: React.ComponentProps) { return ( ); } const navigationMenuTriggerStyle = cva( "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 font-medium text-sm outline-none transition-[color,box-shadow] hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:hover:bg-accent" ); function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps) { return ( {children}{" "} ); } function NavigationMenuContent({ className, ...props }: React.ComponentProps) { return ( ); } function NavigationMenuViewport({ className, ...props }: React.ComponentProps) { return (

); } function NavigationMenuLink({ className, ...props }: React.ComponentProps) { return ( ); } function NavigationMenuIndicator({ className, ...props }: React.ComponentProps) { return (

); } export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };

Example Usage