Navigation Menu

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

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: "#" },
];

<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>;