Navigation Menu

1import { NavigationMenu as KobalteNavigationMenu } from "@kobalte/core/navigation-menu";
2import { ChevronDown } from "lucide-solid";
3import type { Component, ComponentProps, JSX } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7// Kobalte NavigationMenu API:
8// NavigationMenu = root (renders as <ul> horizontal list)
9// NavigationMenu.Menu = individual menu container
10// NavigationMenu.Trigger = button that opens the content
11// NavigationMenu.Content = dropdown content
12// NavigationMenu.Viewport = animated viewport wrapper
13// NavigationMenu.Arrow = optional arrow
14// NavigationMenu.Item = navigable item (link) inside content
15 
16const NavigationMenu: Component<
17  ComponentProps<typeof KobalteNavigationMenu> & { class?: string }
18> = (props) => {
19  const [local, rest] = splitProps(props, ["class"]);
20  return (
21    <KobalteNavigationMenu
22      class={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", local.class)}
23      {...rest}
24    />
25  );
26};
27 
28const NavigationMenuMenu = KobalteNavigationMenu.Menu;
29 
30const NavigationMenuTrigger: Component<ComponentProps<typeof KobalteNavigationMenu.Trigger>> = (
31  props,
32) => {
33  const [local, rest] = splitProps(props, ["class", "children"]);
34  return (
35    <KobalteNavigationMenu.Trigger
36      class={cn(
37        "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2",
38        "text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground",
39        "focus:bg-accent focus:text-accent-foreground focus:outline-none",
40        "disabled:pointer-events-none disabled:opacity-50",
41        "data-[active]:bg-accent/50 data-[expanded]:bg-accent/50",
42        local.class,
43      )}
44      {...rest}
45    >
46      {local.children}
47      <ChevronDown
48        class="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[expanded]:rotate-180"
49        aria-hidden="true"
50      />
51    </KobalteNavigationMenu.Trigger>
52  );
53};
54 
55const NavigationMenuContent: Component<ComponentProps<typeof KobalteNavigationMenu.Content>> = (
56  props,
57) => {
58  const [local, rest] = splitProps(props, ["class"]);
59  return (
60    <KobalteNavigationMenu.Portal>
61      <KobalteNavigationMenu.Content
62        class={cn(
63          "left-0 top-0 w-full md:absolute md:w-auto",
64          "data-[expanded]:animate-in data-[closed]:animate-out",
65          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
66// … truncated