"use client";import { Button } from "@base-ui/react";import { NavigationMenu } from "@base-ui/react/navigation-menu";import { BookOpenIcon, CaretDownIcon, ChatCircleIcon, CodeIcon, GearIcon, PuzzlePieceIcon, RocketLaunchIcon,} from "@phosphor-icons/react";import { motion } from "motion/react";function NavTrigger({ children, className,}: { children: React.ReactNode; className?: string;}) { return ( `d-f ai-c jc-c g-1 h-10 px-3 m-0 bw-0 br-pill fs-sm fw-600 c-slate-10 us-none td-n c-p h:bg-silver-1 ${ state.open ? "bg-silver-1" : "bg-transparent" } ${className || ""}` } render={(props, state) => ( )} /> );}export default function ExampleNavigationMenu() { return ( Developers

{item.icon}

{item.title}

{item.description}

Learn

{item.icon}

{item.title}

{item.description}

Pricing } className="o-h bg-white bc-silver-2 br-3 bw-1 bs-o-lg" > );}const developerLinks = [ { href: "#api", title: "API Reference", description: "Explore endpoints and methods.", icon: , }, { href: "#plugins", title: "Plugins", description: "Extend with custom plugins.", icon: , }, { href: "#tools", title: "CLI Tools", description: "Command line utilities.", icon: , },];const learnLinks = [ { href: "#guides", title: "Guides", description: "Step-by-step tutorials.", icon: , }, { href: "#examples", title: "Examples", description: "Ready-to-use templates.", icon: , }, { href: "#community", title: "Community", description: "Join the discussion.", icon: , },];

 {item.title}

 {item.title}

{item.title}

{item.title}

Navigation Menu

Installation

Examples

Base

API Reference