navigation-menu

1import * as React from "react"
2import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui-components/react/navigation-menu"
3import { Slot } from "@radix-ui/react-slot"
4import { cva } from "class-variance-authority"
5import { ChevronDownIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function NavigationMenu({
10  className,
11  children,
12  ...props
13}: React.ComponentProps<typeof NavigationMenuPrimitive.Root>) {
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    </NavigationMenuPrimitive.Root>
25  )
26}
27 
28function NavigationMenuList({
29  className,
30  ...props
31}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
32  return (
33    <NavigationMenuPrimitive.List
34      data-slot="navigation-menu-list"
35      className={cn(
36        "group flex flex-1 list-none items-center justify-center gap-1",
37        className
38      )}
39      {...props}
40    />
41  )
42}
43 
44function NavigationMenuItem({
45  className,
46  ...props
47}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
48  return (
49    <NavigationMenuPrimitive.Item
50      data-slot="navigation-menu-item"
51      className={cn("relative", className)}
52      {...props}
53    />
54  )
55}
56 
57const navigationMenuTriggerStyle = cva(
58  "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"
59)
60 
61function NavigationMenuTrigger({
62  className,
63  children,
64  ...props
65}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
66  return (
67    <NavigationMenuPrimitive.Trigger
68      data-slot="navigation-menu-trigger"
69      className={cn(navigationMenuTriggerStyle(), "group", className)}
70      {...props}
71    >
72      {children}{" "}
73      <ChevronDownIcon
74        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[popup-open]:rotate-180"
75        aria-hidden="true"
76      />
77    </NavigationMenuPrimitive.Trigger>
78  )
79}
80 
81// … truncated