Navigation-menu

1import * as React from "react";
2import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
3import { cva } from "class-variance-authority";
4import { cn } from "@/lib/utils";
5import {
6  solidSurface,
7  type SurfaceLevel,
8} from "@/registry/default/lib/elevated";
9
10interface NavigationMenuProps extends React.ComponentProps<
11  typeof NavigationMenuPrimitive.Root
12> {
13  side?: React.ComponentProps<
14    typeof NavigationMenuPrimitive.Positioner
15  >["side"];
16  sideOffset?: React.ComponentProps<
17    typeof NavigationMenuPrimitive.Positioner
18  >["sideOffset"];
19  align?: React.ComponentProps<
20    typeof NavigationMenuPrimitive.Positioner
21  >["align"];
22  alignOffset?: React.ComponentProps<
23    typeof NavigationMenuPrimitive.Positioner
24  >["alignOffset"];
25  collisionPadding?: React.ComponentProps<
26    typeof NavigationMenuPrimitive.Positioner
27  >["collisionPadding"];
28  collisionBoundary?: React.ComponentProps<
29    typeof NavigationMenuPrimitive.Positioner
30  >["collisionBoundary"];
31  arrow?: boolean;
32  /** Surface elevation level (1-8) for the bar. Defaults to 2 — subtle toolbar above the page. */
33  level?: SurfaceLevel;
34  /** Shadow weight (1-8) for the bar. Defaults to 2. */
35  shadowLevel?: SurfaceLevel;
36}
37
38function NavigationMenu({
39  className,
40  children,
41  side,
42  sideOffset = 10,
43  align,
44  alignOffset,
45  collisionPadding = { top: 5, bottom: 5, left: 20, right: 20 },
46  collisionBoundary,
47  arrow = false,
48  level = 2,
49  shadowLevel = 2,
50  ...props
51}: NavigationMenuProps) {
52  return (
53    <NavigationMenuPrimitive.Root
54      data-slot="navigation-menu"
55      data-level={level}
56      className={cn(
57        "text-foreground min-w-max rounded-xl p-1",
58        solidSurface(level, shadowLevel),
59        className,
60      )}
61      {...props}
62    >
63      {children}
64      <NavigationMenuViewport
65        side={side}
66        sideOffset={sideOffset}
67        align={align}
68        alignOffset={alignOffset}
69        collisionPadding={collisionPadding}
70        collisionBoundary={collisionBoundary}
71        arrow={arrow}
72      />
73    </NavigationMenuPrimitive.Root>
74  );
75}
76
77function NavigationMenuList({
78  className,
79  ...props
80}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
81  return (
82    <NavigationMenuPrimitive.List
83      data-slot="navigation-menu-list"
84      className={cn("relative flex", className)}
85      {...props}
86    />
87  );
88}
89
90// … truncated