navigation-menu

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