Navigation Menu

import {
  NavigationMenu,
  NavigationMenuArrow,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuPopup,
  NavigationMenuPositioner,
  NavigationMenuTrigger,
} from "@tilt-legal/cubitt-components/primitives";

const resourceLinks = [
  { title: "Changelog", href: "#" },
  { title: "Blog", href: "#" },
  { title: "Docs", href: "#" },
  { title: "Community", href: "#" },
  { title: "Help", href: "#" },
  { title: "Workshops", href: "#" },
  { title: "Forum", href: "#" },
  { title: "Careers", href: "#" },
];

export function NavigationMenuBasicExample() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">About</NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[320px] grid-cols-2 gap-1">
              {resourceLinks.map((item) => (
                <li key={item.title}>
                  <NavigationMenuLink href={item.href}>
                    {item.title}
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Support</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>

      <NavigationMenuPositioner>
        <NavigationMenuPopup>
          <NavigationMenuArrow />
        </NavigationMenuPopup>
      </NavigationMenuPositioner>
    </NavigationMenu>
  );
}