Navigation Menu

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