Navigation Menu

1"use client";
2 
3import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
4import { ChevronDown } from "lucide-react";
5import { cva } from "class-variance-authority";
6 
7import { cn } from "@/lib/utils";
8 
9type NavigationMenuProps = NavigationMenuPrimitive.Root.Props &
10  Pick<NavigationMenuPrimitive.Positioner.Props, "align"> & {
11    positionerClassName?: string;
12    /**
13     * Render the built-in positioner. Set to false when composing your own
14     * `NavigationMenuPositioner` in `children` (e.g. to change side or
15     * offsets), so two portalled positioners never mount at once.
16     */
17    positioner?: boolean;
18  };
19 
20function NavigationMenu({
21  align = "center",
22  className,
23  children,
24  positionerClassName,
25  positioner = true,
26  ...props
27}: NavigationMenuProps) {
28  return (
29    <NavigationMenuPrimitive.Root
30      data-slot="navigation-menu"
31      className={cn(
32        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
33        className,
34      )}
35      {...props}
36    >
37      {children}
38      {positioner ? (
39        <NavigationMenuPositioner
40          align={align}
41          className={positionerClassName}
42        />
43      ) : null}
44    </NavigationMenuPrimitive.Root>
45  );
46}
47 
48function NavigationMenuList({
49  className,
50  ...props
51}: NavigationMenuPrimitive.List.Props) {
52  return (
53    <NavigationMenuPrimitive.List
54      data-slot="navigation-menu-list"
55      className={cn(
56        "flex flex-1 list-none items-center justify-center gap-0",
57        className,
58      )}
59      {...props}
60    />
61  );
62}
63 
64function NavigationMenuItem({
65  className,
66  ...props
67}: NavigationMenuPrimitive.Item.Props) {
68  return (
69    <NavigationMenuPrimitive.Item
70      data-slot="navigation-menu-item"
71      className={cn("relative", className)}
72      {...props}
73    />
74  );
75}
76 
77const navigationMenuTriggerStyle = cva(
78  "group/navigation-menu-trigger inline-flex h-8 w-max items-center justify-center rounded-md px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none",
79);
80 
81function NavigationMenuTrigger({
82  className,
83  children,
84  ...props
85}: NavigationMenuPrimitive.Trigger.Props) {
86  return (
87    <NavigationMenuPrimitive.Trigger
88      data-slot="navigation-menu-trigger"
89// … truncated