Navigation Menu

1import { ComponentPropsWithRef } 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  align = "start",
10  className,
11  children,
12  ...props
13}: NavigationMenuPrimitive.Root.Props &
14  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
15  return (
16    <NavigationMenuPrimitive.Root
17      data-slot="navigation-menu"
18      className={cn(
19        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
20        className
21      )}
22      {...props}
23    >
24      {children}
25      <NavigationMenuPositioner align={align} />
26    </NavigationMenuPrimitive.Root>
27  )
28}
29
30function NavigationMenuList({
31  className,
32  ...props
33}: ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
34  return (
35    <NavigationMenuPrimitive.List
36      data-slot="navigation-menu-list"
37      className={cn(
38        "group flex flex-1 list-none items-center justify-center gap-1",
39        className
40      )}
41      {...props}
42    />
43  )
44}
45
46function NavigationMenuItem({
47  className,
48  ...props
49}: ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
50  return (
51    <NavigationMenuPrimitive.Item
52      data-slot="navigation-menu-item"
53      className={cn("relative", className)}
54      {...props}
55    />
56  )
57}
58
59const navigationMenuTriggerStyle = cva(
60  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-base font-medium transition-all outline-none hover:bg-background 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"
61)
62
63function NavigationMenuTrigger({
64  className,
65  children,
66  ...props
67}: NavigationMenuPrimitive.Trigger.Props) {
68  return (
69    <NavigationMenuPrimitive.Trigger
70      data-slot="navigation-menu-trigger"
71      className={cn(navigationMenuTriggerStyle(), "group", className)}
72      {...props}
73    >
74      {children}{" "}
75      <ChevronDownIcon
76// … truncated