navigation-menu

1import * as React from "react"
2import { NavigationMenu as BaseNavigationMenu } 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	className,
10	children,
11	...props
12}: React.ComponentProps<typeof BaseNavigationMenu.Root>) {
13	return (
14		<BaseNavigationMenu.Root
15			data-slot="navigation-menu"
16			className={cn("min-w-max", className)}
17			{...props}
18		>
19			{children}
20			<NavigationMenuViewport />
21		</BaseNavigationMenu.Root>
22	)
23}
24 
25function NavigationMenuList({
26	className,
27	...props
28}: React.ComponentProps<typeof BaseNavigationMenu.List>) {
29	return (
30		<BaseNavigationMenu.List
31			data-slot="navigation-menu-list"
32			className={cn(
33				"relative flex items-center justify-center gap-1",
34				className
35			)}
36			{...props}
37		/>
38	)
39}
40 
41function NavigationMenuItem({
42	...props
43}: React.ComponentProps<typeof BaseNavigationMenu.Item>) {
44	return <BaseNavigationMenu.Item data-slot="navigation-menu-item" {...props} />
45}
46 
47function NavigationMenuIcon({
48	...props
49}: React.ComponentProps<typeof BaseNavigationMenu.Icon>) {
50	return <BaseNavigationMenu.Icon data-slot="navigation-menu-icon" {...props} />
51}
52 
53const navigationMenuTriggerStyle = cva(
54	"inline-flex w-max items-center justify-center gap-1.5 h-9 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 data-disabled:pointer-events-none data-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-3 focus-visible:outline-1 select-none no-underline [&_svg:not([class*='size-'])]:size-3 shrink-0 [&_svg]:shrink-0"
55)
56 
57function NavigationMenuTrigger({
58	className,
59	children,
60	...props
61}: React.ComponentProps<typeof BaseNavigationMenu.Trigger>) {
62	return (
63		<BaseNavigationMenu.Trigger
64			data-slot="navigation-menu-trigger"
65			className={cn(navigationMenuTriggerStyle(), className)}
66			data-disabled={props.disabled}
67			{...props}
68		>
69			{children}
70			<NavigationMenuIcon className="transition-transform duration-200 data-popup-open:rotate-180">
71				<ChevronDownIcon aria-hidden="true" />
72			</NavigationMenuIcon>
73		</BaseNavigationMenu.Trigger>
74	)
75}
76 
77function NavigationMenuContent({
78	className,
79	...props
80// … truncated