Navigation Menu

1"use client";
2 
3import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
4import type * as React from "react";
5import { cn } from "@/lib/utils";
6import {
7  colorTransition,
8  overlayLayer,
9  popupSurface,
10  selectionFocus,
11} from "@/lib/recipes";
12 
13import { CaretDown } from "@phosphor-icons/react/dist/ssr";
14/** Horizontal menu bar with morphing dropdown panels sharing one portalled popup. */
15export function NavigationMenu({
16  className,
17  children,
18  ...props
19}: React.ComponentProps<typeof NavigationMenuPrimitive.Root>): React.ReactElement {
20  return (
21    <NavigationMenuPrimitive.Root
22      data-slot="navigation-menu"
23      className={cn("relative", className)}
24      {...props}
25    >
26      {children}
27      <NavigationMenuPrimitive.Portal>
28        <NavigationMenuPrimitive.Positioner
29          data-slot="navigation-menu-positioner"
30          className={cn(
31            overlayLayer.popup,
32            "box-border h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[var(--duration-overlay)] ease-[var(--ease-standard)]",
33          )}
34          sideOffset={8}
35          collisionPadding={12}
36        >
37          <NavigationMenuPrimitive.Popup
38            data-slot="navigation-menu-popup"
39            className={cn(
40              popupSurface,
41              "relative h-[var(--popup-height)] w-[var(--popup-width)] origin-[var(--transform-origin)] overflow-hidden text-ink",
42              "transition-[opacity,transform,width,height] duration-[var(--duration-overlay)] ease-[var(--ease-standard)]",
43              "data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]",
44            )}
45          >
46            <NavigationMenuPrimitive.Viewport className="relative h-full w-full" />
47          </NavigationMenuPrimitive.Popup>
48        </NavigationMenuPrimitive.Positioner>
49      </NavigationMenuPrimitive.Portal>
50    </NavigationMenuPrimitive.Root>
51  );
52}
53 
54export function NavigationMenuList({
55  className,
56  ...props
57}: React.ComponentProps<typeof NavigationMenuPrimitive.List>): React.ReactElement {
58  return (
59    <NavigationMenuPrimitive.List
60      data-slot="navigation-menu-list"
61      className={cn("flex items-center gap-1", className)}
62      {...props}
63    />
64  );
65}
66 
67export function NavigationMenuItem(
68  props: React.ComponentProps<typeof NavigationMenuPrimitive.Item>,
69): React.ReactElement {
70// … truncated