navigation-menu.tsx raw
1 import * as React from "react";
2 import { cva } from "class-variance-authority";
3 import { ChevronDownIcon } from "lucide-react";
4 import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
5
6 import { cn } from "src/lib/utils";
7
8 function 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
32 function 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
48 function 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
61 const 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 transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
63 );
64
65 function 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 </NavigationMenuPrimitive.Trigger>
82 );
83 }
84
85 function NavigationMenuContent({
86 className,
87 ...props
88 }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
89 return (
90 <NavigationMenuPrimitive.Content
91 data-slot="navigation-menu-content"
92 className={cn(
93 "top-0 left-0 w-full p-2 pr-2.5 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out md:absolute md:w-auto",
94 "group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
95 className
96 )}
97 {...props}
98 />
99 );
100 }
101
102 function NavigationMenuViewport({
103 className,
104 ...props
105 }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
106 return (
107 <div
108 className={cn(
109 "absolute top-full left-0 isolate z-50 flex justify-center"
110 )}
111 >
112 <NavigationMenuPrimitive.Viewport
113 data-slot="navigation-menu-viewport"
114 className={cn(
115 "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
116 className
117 )}
118 {...props}
119 />
120 </div>
121 );
122 }
123
124 function NavigationMenuLink({
125 className,
126 ...props
127 }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
128 return (
129 <NavigationMenuPrimitive.Link
130 data-slot="navigation-menu-link"
131 className={cn(
132 "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
133 className
134 )}
135 {...props}
136 />
137 );
138 }
139
140 function NavigationMenuIndicator({
141 className,
142 ...props
143 }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
144 return (
145 <NavigationMenuPrimitive.Indicator
146 data-slot="navigation-menu-indicator"
147 className={cn(
148 "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
149 className
150 )}
151 {...props}
152 >
153 <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
154 </NavigationMenuPrimitive.Indicator>
155 );
156 }
157
158 export {
159 NavigationMenu,
160 NavigationMenuList,
161 NavigationMenuItem,
162 NavigationMenuContent,
163 NavigationMenuTrigger,
164 NavigationMenuLink,
165 NavigationMenuIndicator,
166 NavigationMenuViewport,
167 navigationMenuTriggerStyle,
168 };
169