Navigation Menu

1import * as React from "react"
2import { cva } from "class-variance-authority"
3import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
4import { ChevronDownIcon } from "lucide-react"
5 
6import { cn, floatingSurfaceClasses } from "@/registry/lib/surface"
7import { ThemedPortalShell } from "@/registry/lib/portal-container"
8 
9function NavigationMenu({
10  align = "start",
11  className,
12  children,
13  ...props
14}: NavigationMenuPrimitive.Root.Props &
15  Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
16  return (
17    <NavigationMenuPrimitive.Root
18      data-slot="navigation-menu"
19      className={cn(
20        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
21        className
22      )}
23      {...props}
24    >
25      {children}
26      <NavigationMenuPositioner align={align} />
27    </NavigationMenuPrimitive.Root>
28  )
29}
30 
31function NavigationMenuList({
32  className,
33  ...props
34}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
35  return (
36    <NavigationMenuPrimitive.List
37      data-slot="navigation-menu-list"
38      className={cn(
39        "group flex flex-1 list-none items-center justify-center gap-0",
40        className
41      )}
42      {...props}
43    />
44  )
45}
46 
47function NavigationMenuItem({
48  className,
49  ...props
50}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
51  return (
52    <NavigationMenuPrimitive.Item
53      data-slot="navigation-menu-item"
54      className={cn("relative", className)}
55      {...props}
56    />
57  )
58}
59 
60const navigationMenuTriggerStyle = cva(
61  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium outline-none transition-opacity duration-[var(--d-drift)] ease-[var(--ease-drift)] hover:opacity-60 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring active:opacity-40 active:duration-[var(--d-snap)] active:ease-[var(--ease-snap)] disabled:pointer-events-none disabled:opacity-40 data-popup-open:opacity-60 data-open:opacity-60"
62)
63 
64function NavigationMenuTrigger({
65  className,
66  children,
67  ...props
68}: NavigationMenuPrimitive.Trigger.Props) {
69  return (
70    <NavigationMenuPrimitive.Trigger
71      data-slot="navigation-menu-trigger"
72      className={cn(navigationMenuTriggerStyle(), "group", className)}
73      {...props}
74    >
75      {children}{" "}
76      <ChevronDownIcon
77// … truncated