Navigation Menu

1import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
2import { cva } from "class-variance-authority";
3import { cn } from "@/lib/utils";
4import { ChevronDownIcon } from "lucide-react";
5import { buttonVariants } from "@/registry/optics/button";
6 
7function NavigationMenu({ className = "", children = null, ...props }) {
8	return (
9		<NavigationMenuPrimitive.Root
10			data-slot="navigation-menu"
11			className={cn(
12				"max-w-max group/navigation-menu relative flex flex-1 items-center justify-center",
13				className,
14			)}
15			{...props}
16		>
17			{children}
18			<NavigationMenuPositioner />
19		</NavigationMenuPrimitive.Root>
20	);
21}
22 
23function NavigationMenuList({ className = "", ...props }) {
24	return (
25		<NavigationMenuPrimitive.List
26			data-slot="navigation-menu-list"
27			className={cn(
28				"gap-0 group flex flex-1 list-none items-center justify-center",
29				className,
30			)}
31			{...props}
32		/>
33	);
34}
35 
36function NavigationMenuItem({ className = "", ...props }) {
37	return (
38		<NavigationMenuPrimitive.Item
39			data-slot="navigation-menu-item"
40			className={cn("relative", className)}
41			{...props}
42		/>
43	);
44}
45 
46const navigationMenuTriggerStyle = cva(
47	"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none",
48);
49 
50function NavigationMenuTrigger({ className = "", children = null, ...props }) {
51	return (
52		<NavigationMenuPrimitive.Trigger
53			data-slot="navigation-menu-trigger"
54			className={cn(
55				navigationMenuTriggerStyle(),
56				"group",
57				buttonVariants({ variant: "ghost" }),
58				className,
59			)}
60			{...props}
61		>
62			{children}{" "}
63			<ChevronDownIcon
64				className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
65				aria-hidden="true"
66			/>
67		</NavigationMenuPrimitive.Trigger>
68	);
69}
70 
71function NavigationMenuContent({ className = "", ...props }) {
72	return (
73		<NavigationMenuPrimitive.Content
74			data-slot="navigation-menu-content"
75			className={cn(
76// … truncated