Navigation Menu

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