Navigation Menu

TSX
"use client";

import * as React from "react";
import { cn } from "cn";

import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const links = [
  { href: "#overview", label: "Overview" },
  { href: "#projects", label: "Projects" },
  { href: "#deployments", label: "Deployments" },
  { href: "#settings", label: "Settings" },
];

export default function NavigationMenu01() {
  const [current, setCurrent] = React.useState("#projects");

  return (
    <NavigationMenu aria-label="Workspace" className="w-full max-w-md">
      <NavigationMenuList className="flex-wrap gap-1">
        {links.map((link) => {
          const active = link.href === current;
          return (
            <NavigationMenuItem key={link.href}>
              <NavigationMenuLink
                href={link.href}
                active={active}
                aria-current={active ? "page" : undefined}
                onClick={(event) => {
                  event.preventDefault();
                  setCurrent(link.href);
                }}
                className={cn(
                  navigationMenuTriggerStyle(),
                  "text-muted-foreground hover:text-foreground data-active:bg-muted data-active:text-foreground",
                )}
              >
                {link.label}
              </NavigationMenuLink>
            </NavigationMenuItem>
          );
        })}
      </NavigationMenuList>
    </NavigationMenu>
  );
}

TSX
"use client";

import { Menu } from "lucide-react";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const links = [
  { href: "#features", label: "Features" },
  { href: "#customers", label: "Customers" },
  { href: "#pricing", label: "Pricing" },
  { href: "#changelog", label: "Changelog" },
];

const secondary = [
  { href: "#docs", label: "Documentation" },
  { href: "#contact", label: "Contact sales" },
];

// Inline links from the sm breakpoint up; one "Menu" panel below it.
export default function NavigationMenu02() {
  return (
    <header className="flex w-full max-w-2xl items-center justify-between gap-2 border-b border-border pb-2">
      <span className="text-sm font-semibold">Tidewater</span>
      <NavigationMenu aria-label="Main" align="end">
        <NavigationMenuList className="gap-0.5">
          {links.map((link) => (
            <NavigationMenuItem key={link.href} className="hidden sm:block">
              <NavigationMenuLink
                href={link.href}
                className={navigationMenuTriggerStyle()}
              >
                {link.label}
              </NavigationMenuLink>
            </NavigationMenuItem>
          ))}
          <NavigationMenuItem className="sm:hidden">
            <NavigationMenuTrigger className="gap-1.5">
              <Menu aria-hidden="true" className="size-4" />
              Menu
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="flex w-[min(16rem,calc(100vw-2rem))] flex-col">
                <ul className="grid gap-0.5">
                  {links.map((link) => (
                    <li key={link.href}>
                      <NavigationMenuLink
                        closeOnClick
                        href={link.href}
                        className="px-3 py-2.5 text-base font-medium"
                      >
                        {link.label}
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
                <ul className="mt-1 grid gap-0.5 border-t border-border pt-1">
                  {secondary.map((link) => (
                    <li key={link.href}>
                      <NavigationMenuLink
                        closeOnClick
                        href={link.href}
                        className="px-3 text-muted-foreground hover:text-foreground focus:text-foreground"
                      >
                        {link.label}
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </header>
  );
}

TSX
"use client";

import { cn } from "cn";

import { Badge } from "@/components/ui/badge";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const pill =
  "h-8 rounded-full px-3 text-muted-foreground hover:bg-background/70 hover:text-foreground focus:bg-background/70 data-popup-open:bg-background data-popup-open:text-foreground data-popup-open:shadow-sm data-popup-open:hover:bg-background";

const learn = [
  { href: "#guides", title: "Guides", note: "Step-by-step walkthroughs" },
  { href: "#api", title: "API reference", note: "Every endpoint, typed" },
  { href: "#templates", title: "Templates", note: "Start from a working app", isNew: true },
];

const company = [
  { href: "#about", title: "About", note: "Who we are and why" },
  { href: "#careers", title: "Careers", note: "Six open roles, remote-first" },
  { href: "#press", title: "Press kit", note: "Logos and screenshots" },
];

function LinkList({ items }: { items: typeof learn }) {
  return (
    <ul className="grid w-[min(16rem,calc(100vw-2rem))] gap-0.5">
      {items.map((item) => (
        <li key={item.href}>
          <NavigationMenuLink
            href={item.href}
            closeOnClick
            className="justify-between"
          >
            <span className="flex flex-col">
              <span className="font-medium">{item.title}</span>
              <span className="text-xs text-muted-foreground">{item.note}</span>
            </span>
            {"isNew" in item && item.isNew ? <Badge>New</Badge> : null}
          </NavigationMenuLink>
        </li>
      ))}
    </ul>
  );
}

export default function NavigationMenu03() {
  return (
    <NavigationMenu
      aria-label="Site"
      className="rounded-full border border-border bg-muted/60 p-1"
    >
      <NavigationMenuList className="gap-0.5">
        <NavigationMenuItem>
          <NavigationMenuTrigger className={pill}>Learn</NavigationMenuTrigger>
          <NavigationMenuContent>
            <LinkList items={learn} />
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger className={pill}>Company</NavigationMenuTrigger>
          <NavigationMenuContent>
            <LinkList items={company} />
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="#blog"
            className={cn(navigationMenuTriggerStyle(), pill)}
          >
            Blog
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

TSX
"use client";

import { CreditCard, LogOut, Settings, UserRound } from "lucide-react";

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const accountLinks = [
  { href: "#profile", icon: UserRound, label: "Profile" },
  { href: "#billing", icon: CreditCard, label: "Billing" },
  { href: "#preferences", icon: Settings, label: "Preferences" },
];

export default function NavigationMenu04() {
  return (
    <div className="flex w-full max-w-md justify-end">
      <NavigationMenu align="end" aria-label="Account">
        <NavigationMenuList className="gap-1">
          <NavigationMenuItem>
            <NavigationMenuLink
              href="#help"
              className={navigationMenuTriggerStyle()}
            >
              Help
            </NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger
              aria-label="Account menu for Maya Chen"
              className="h-10 gap-2 pl-1"
            >
              <Avatar size="sm">
                <AvatarImage src="/placeholder.svg" alt="" />
                <AvatarFallback>MC</AvatarFallback>
              </Avatar>
              <span className="hidden sm:inline">Maya Chen</span>
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="flex w-[min(15rem,calc(100vw-2rem))] flex-col">
                <div className="flex items-center gap-3 px-2 pt-2 pb-3">
                  <Avatar>
                    <AvatarImage src="/placeholder.svg" alt="" />
                    <AvatarFallback>MC</AvatarFallback>
                  </Avatar>
                  <div className="flex min-w-0 flex-col">
                    <span className="truncate text-sm font-medium">
                      Maya Chen
                    </span>
                    <span className="truncate text-xs text-muted-foreground">
                      maya@northwind.app
                    </span>
                  </div>
                </div>
                <ul className="grid gap-0.5 border-t border-border pt-1">
                  {accountLinks.map((link) => (
                    <li key={link.href}>
                      <NavigationMenuLink closeOnClick href={link.href}>
                        <link.icon
                          aria-hidden="true"
                          className="text-muted-foreground"
                        />
                        {link.label}
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
                <div className="mt-1 border-t border-border pt-1">
                  <NavigationMenuLink
                    closeOnClick
                    href="#sign-out"
                    className="text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
                  >
                    <LogOut aria-hidden="true" />
                    Sign out
                  </NavigationMenuLink>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  );
}

TSX
"use client";

import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";

const sections = [
  {
    value: "platform",
    label: "Platform",
    links: [
      { href: "#compute", title: "Compute", note: "Containers that scale to zero" },
      { href: "#storage", title: "Storage", note: "S3-compatible object buckets" },
      { href: "#edge", title: "Edge network", note: "310 cities, one config file" },
    ],
  },
  {
    value: "developers",
    label: "Developers",
    links: [
      { href: "#cli", title: "CLI", note: "Deploy from your terminal" },
      { href: "#sdk", title: "SDKs", note: "TypeScript, Go, and Python" },
      { href: "#changelog", title: "Changelog", note: "Shipped this week" },
    ],
  },
];

export default function NavigationMenu05() {
  const [value, setValue] = useState<string | null>(null);
  const openSection = sections.find((section) => section.value === value);

  return (
    <div className="flex w-full max-w-md flex-col items-center gap-4">
      <NavigationMenu
        aria-label="Product"
        value={value}
        onValueChange={(next) => setValue(next as string | null)}
      >
        <NavigationMenuList className="gap-1">
          {sections.map((section) => (
            <NavigationMenuItem key={section.value} value={section.value}>
              <NavigationMenuTrigger>{section.label}</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[min(16rem,calc(100vw-2rem))] gap-0.5">
                  {section.links.map((link) => (
                    <li key={link.href}>
                      <NavigationMenuLink
                        closeOnClick
                        href={link.href}
                        className="flex-col items-start gap-0.5"
                      >
                        <span className="font-medium">{link.title}</span>
                        <span className="text-xs text-muted-foreground">
                          {link.note}
                        </span>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          ))}
        </NavigationMenuList>
      </NavigationMenu>
      <div className="flex w-full flex-col gap-3 rounded-lg border border-dashed border-border p-3">
        <p className="text-sm text-muted-foreground" aria-live="polite">
          Open panel:{" "}
          <span className="font-medium text-foreground">
            {openSection ? openSection.label : "None"}
          </span>
        </p>
        <div className="flex flex-wrap gap-2">
          {sections.map((section) => (
            <Button
              key={section.value}
              size="sm"
              variant={value === section.value ? "secondary" : "outline"}
              aria-pressed={value === section.value}
              onClick={() => setValue(section.value)}
            >
              Open {section.label}
            </Button>
          ))}
          <Button
            size="sm"
            variant="ghost"
            disabled={value === null}
            onClick={() => setValue(null)}
          >
            Close
          </Button>
        </div>
      </div>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { cn } from "cn";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";

// A 2px bar grows from the center under the hovered, focused, open, or active item.
const underline =
  "relative h-11 rounded-none bg-transparent px-3 text-muted-foreground hover:bg-transparent hover:text-foreground focus:bg-transparent focus-visible:rounded-md data-popup-open:bg-transparent data-popup-open:text-foreground data-popup-open:hover:bg-transparent data-active:bg-transparent data-active:text-foreground after:absolute after:inset-x-3 after:bottom-0 after:h-0.5 after:origin-center after:scale-x-0 after:rounded-full after:bg-foreground after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.22,1,0.36,1)] hover:after:scale-x-100 focus-visible:after:scale-x-100 data-popup-open:after:scale-x-100 data-active:after:scale-x-100 motion-reduce:after:transition-none";

const guides = [
  { href: "#quickstart", title: "Quickstart", minutes: 5 },
  { href: "#auth", title: "Add authentication", minutes: 12 },
  { href: "#webhooks", title: "Handle webhooks", minutes: 8 },
  { href: "#testing", title: "Test in CI", minutes: 10 },
];

export default function NavigationMenu06() {
  const [current, setCurrent] = React.useState("#docs");
  const guideActive = guides.some((guide) => guide.href === current);

  function go(href: string) {
    return (event: React.MouseEvent) => {
      event.preventDefault();
      setCurrent(href);
    };
  }

  return (
    <NavigationMenu
      aria-label="Documentation"
      className="w-full max-w-md justify-start border-b border-border"
    >
      <NavigationMenuList className="gap-0">
        <NavigationMenuItem>
          <NavigationMenuLink
            href="#docs"
            active={current === "#docs"}
            aria-current={current === "#docs" ? "page" : undefined}
            onClick={go("#docs")}
            className={cn("text-sm font-medium", underline)}
          >
            Docs
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger
            className={cn(
              underline,
              guideActive && "text-foreground after:scale-x-100",
            )}
          >
            Guides
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[min(15rem,calc(100vw-2rem))] gap-0.5">
              {guides.map((guide) => (
                <li key={guide.href}>
                  <NavigationMenuLink
                    closeOnClick
                    href={guide.href}
                    active={current === guide.href}
                    aria-current={current === guide.href ? "page" : undefined}
                    onClick={go(guide.href)}
                    className="justify-between"
                  >
                    <span>{guide.title}</span>
                    <span className="text-xs text-muted-foreground tabular-nums">
                      {guide.minutes} min
                    </span>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="#api"
            active={current === "#api"}
            aria-current={current === "#api" ? "page" : undefined}
            onClick={go("#api")}
            className={cn("text-sm font-medium", underline)}
          >
            API
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

TSX
"use client";

import { cn } from "cn";

import { Badge } from "@/components/ui/badge";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const compact = "h-7 rounded-md px-2 text-xs";

const services = [
  { href: "#api", name: "API", status: "operational" },
  { href: "#dashboard", name: "Dashboard", status: "operational" },
  { href: "#webhooks", name: "Webhooks", status: "degraded" },
  { href: "#exports", name: "CSV exports", status: "outage" },
] as const;

const statusStyles = {
  operational: { dot: "bg-success", label: "Operational" },
  degraded: { dot: "bg-warning", label: "Degraded" },
  outage: { dot: "bg-destructive", label: "Outage" },
};

export default function NavigationMenu07() {
  return (
    <NavigationMenu
      aria-label="Console"
      className="rounded-lg border border-border bg-card p-1"
    >
      <NavigationMenuList className="flex-wrap gap-0.5">
        <NavigationMenuItem>
          <NavigationMenuTrigger className={compact}>Status</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[min(15rem,calc(100vw-2rem))] gap-0.5">
              {services.map((service) => {
                const style = statusStyles[service.status];
                return (
                  <li key={service.href}>
                    <NavigationMenuLink
                      closeOnClick
                      href={service.href}
                      className="justify-between px-2 py-1.5 text-xs"
                    >
                      <span>{service.name}</span>
                      <span className="flex items-center gap-1.5 text-muted-foreground">
                        <span
                          aria-hidden="true"
                          className={cn("size-1.5 rounded-full", style.dot)}
                        />
                        {style.label}
                      </span>
                    </NavigationMenuLink>
                  </li>
                );
              })}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="#logs"
            className={cn(navigationMenuTriggerStyle(), compact)}
          >
            Logs
          </NavigationMenuLink>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger disabled className={cn(compact, "gap-1.5")}>
            Marketplace
            <Badge variant="outline" className="h-4 px-1.5 text-[0.625rem]">
              Soon
            </Badge>
          </NavigationMenuTrigger>
          <NavigationMenuContent>
            <p className="w-48 p-2 text-xs text-muted-foreground">
              Integrations launch next quarter.
            </p>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

TSX
"use client";

import * as React from "react";
import { cn } from "cn";
import { ChartLine, FileChartColumn, Star } from "lucide-react";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const pages = [
  { id: "overview", label: "Overview" },
  { id: "funnels", label: "Funnels" },
];

const reports = [
  {
    id: "weekly-revenue",
    label: "Weekly revenue",
    meta: "Updated 2 hours ago",
    starred: true,
  },
  {
    id: "trial-conversion",
    label: "Trial to paid conversion",
    meta: "Updated yesterday",
    starred: true,
  },
  {
    id: "churn-by-plan",
    label: "Churn by plan",
    meta: "Updated Sep 18",
    starred: false,
  },
];

const summaries: Record<string, string> = {
  overview: "Sessions, signups, and revenue for the last 30 days.",
  funnels: "Step-by-step drop-off from landing page to first payment.",
  "weekly-revenue": "Net revenue grouped by week, compared with last quarter.",
  "trial-conversion": "Share of trials that upgraded within 14 days.",
  "churn-by-plan": "Monthly cancellations split by Starter, Team, and Scale.",
};

export default function NavigationMenu08() {
  const [current, setCurrent] = React.useState("overview");
  const report = reports.find((item) => item.id === current);
  const title = report?.label ?? pages.find((p) => p.id === current)?.label;

  function go(id: string) {
    return (event: React.MouseEvent) => {
      event.preventDefault();
      setCurrent(id);
    };
  }

  return (
    <div className="w-full max-w-xl overflow-hidden rounded-xl border bg-card text-card-foreground">
      <header className="flex items-center gap-2 border-b px-3 py-2">
        <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
          <ChartLine className="size-4" aria-hidden="true" />
        </span>
        <NavigationMenu aria-label="Analytics">
          <NavigationMenuList className="gap-0.5">
            {pages.map((page) => (
              <NavigationMenuItem key={page.id}>
                <NavigationMenuLink
                  href={`#${page.id}`}
                  active={current === page.id}
                  aria-current={current === page.id ? "page" : undefined}
                  onClick={go(page.id)}
                  className={cn(
                    navigationMenuTriggerStyle(),
                    "data-active:bg-muted data-active:text-foreground",
                  )}
                >
                  {page.label}
                </NavigationMenuLink>
              </NavigationMenuItem>
            ))}
            <NavigationMenuItem>
              <NavigationMenuTrigger
                className={cn(report && "bg-muted text-foreground")}
              >
                Reports
              </NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="w-64 p-1">
                  <p className="px-2 pt-1 pb-2 text-xs font-medium text-muted-foreground">
                    Saved reports
                  </p>
                  <ul className="grid gap-0.5">
                    {reports.map((item) => (
                      <li key={item.id}>
                        <NavigationMenuLink
                          href={`#${item.id}`}
                          active={current === item.id}
                          aria-current={current === item.id ? "page" : undefined}
                          closeOnClick
                          onClick={go(item.id)}
                          className="items-start"
                        >
                          <FileChartColumn
                            className="mt-0.5 text-muted-foreground"
                            aria-hidden="true"
                          />
                          <span className="flex min-w-0 flex-1 flex-col">
                            <span className="truncate font-medium">
                              {item.label}
                            </span>
                            <span className="text-xs text-muted-foreground">
                              {item.meta}
                            </span>
                          </span>
                          {item.starred ? (
                            <>
                              <Star
                                className="mt-0.5 size-3.5 fill-current text-warning"
                                aria-hidden="true"
                              />
                              <span className="sr-only">Starred</span>
                            </>
                          ) : null}
                        </NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </header>
      <div className="flex flex-col gap-1 p-4">
        <h3 className="text-sm font-semibold">{title}</h3>
        <p className="text-sm text-muted-foreground">{summaries[current]}</p>
      </div>
    </div>
  );
}

TSX
"use client";

import { cn } from "cn";
import { BookOpen, Braces, Terminal } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";

const endpoints = [
  { method: "GET", path: "/v2/invoices", label: "List invoices" },
  { method: "POST", path: "/v2/invoices", label: "Create an invoice" },
  { method: "PATCH", path: "/v2/customers/:id", label: "Update a customer" },
  { method: "DELETE", path: "/v2/webhooks/:id", label: "Remove a webhook" },
];

const sdks = [
  { name: "Node.js", install: "npm i @ledgerly/node", version: "v5.3.0" },
  { name: "Python", install: "pip install ledgerly", version: "v4.8.1" },
  { name: "Go", install: "go get ledgerly.dev/go", version: "v2.1.0" },
];

const anchor = (value: string) =>
  `#${value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "")}`;

const methodStyles: Record<string, string> = {
  GET: "bg-chart-2/15 text-chart-2",
  POST: "bg-chart-1/15 text-chart-1",
  PATCH: "bg-chart-4/15 text-chart-4",
  DELETE: "bg-destructive/10 text-destructive",
};

export default function NavigationMenu09() {
  return (
    <header className="flex w-full max-w-2xl flex-wrap items-center justify-between gap-x-4 gap-y-2 rounded-xl border bg-card px-3 py-2 text-card-foreground">
      <div className="flex items-center gap-2">
        <span className="text-sm font-semibold">Ledgerly Docs</span>
        <Badge variant="outline" className="font-mono">
          API 2026-09
        </Badge>
      </div>
      <NavigationMenu
        aria-label="Developer documentation"
        align="end"
        className="flex-none"
      >
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>
              <Braces className="mr-1.5 size-4" aria-hidden="true" />
              API
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="w-72 p-1 sm:w-80">
                <ul className="grid gap-0.5">
                  {endpoints.map((endpoint) => (
                    <li key={`${endpoint.method} ${endpoint.path}`}>
                      <NavigationMenuLink
                        closeOnClick
                        href={anchor(`${endpoint.method} ${endpoint.path}`)}
                        className="items-start gap-3"
                      >
                        <span
                          className={cn(
                            "mt-0.5 w-14 shrink-0 rounded px-1.5 py-0.5 text-center font-mono text-[0.65rem] font-semibold",
                            methodStyles[endpoint.method],
                          )}
                        >
                          {endpoint.method}
                        </span>
                        <span className="flex min-w-0 flex-col">
                          <span className="font-medium">{endpoint.label}</span>
                          <code className="truncate font-mono text-xs text-muted-foreground">
                            {endpoint.path}
                          </code>
                        </span>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
                <div className="mt-1 border-t pt-1">
                  <NavigationMenuLink
                    closeOnClick
                    href="#reference"
                    className="justify-center text-xs text-muted-foreground"
                  >
                    View all 64 endpoints
                  </NavigationMenuLink>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>
              <Terminal className="mr-1.5 size-4" aria-hidden="true" />
              SDKs
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-72 gap-0.5 p-1">
                {sdks.map((sdk) => (
                  <li key={sdk.name}>
                    <NavigationMenuLink
                      closeOnClick
                      href={`#sdk-${sdk.name.toLowerCase()}`}
                      className="flex-col items-stretch gap-1"
                    >
                      <span className="flex items-center justify-between">
                        <span className="font-medium">{sdk.name}</span>
                        <span className="font-mono text-xs text-muted-foreground">
                          {sdk.version}
                        </span>
                      </span>
                      <code className="truncate rounded bg-muted px-1.5 py-1 font-mono text-xs">
                        {sdk.install}
                      </code>
                    </NavigationMenuLink>
                  </li>
                ))}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem className="hidden sm:block">
            <NavigationMenuTrigger>
              <BookOpen className="mr-1.5 size-4" aria-hidden="true" />
              Guides
            </NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-64 gap-0.5 p-1">
                <li>
                  <NavigationMenuLink closeOnClick href="#quickstart" className="flex-col items-start gap-0.5">
                    <span className="font-medium">Quickstart</span>
                    <span className="text-xs text-muted-foreground">
                      Send your first invoice in five minutes.
                    </span>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink closeOnClick href="#webhooks" className="flex-col items-start gap-0.5">
                    <span className="font-medium">Verifying webhooks</span>
                    <span className="text-xs text-muted-foreground">
                      Check signatures before trusting an event.
                    </span>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink closeOnClick href="#idempotency" className="flex-col items-start gap-0.5">
                    <span className="font-medium">Idempotent retries</span>
                    <span className="text-xs text-muted-foreground">
                      Retry safely with an Idempotency-Key header.
                    </span>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </header>
  );
}

TSX
"use client";

import { cn } from "cn";
import { ShoppingBag } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const departments = [
  {
    title: "Women",
    categories: [
      "New arrivals",
      "Knitwear",
      "Coats & jackets",
      "Trousers",
      "Shoes",
    ],
    featured: {
      name: "Merino crewneck",
      price: "$88",
      note: "Back in stock in 6 colors",
    },
  },
  {
    title: "Men",
    categories: ["New arrivals", "Overshirts", "Chinos", "Outerwear", "Boots"],
    featured: {
      name: "Waxed field jacket",
      price: "$240",
      note: "Water-resistant, made in Portugal",
    },
  },
];

const anchor = (value: string) =>
  `#${value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "")}`;

export default function NavigationMenu10() {
  return (
    <header className="flex w-full max-w-2xl items-center justify-between gap-2 rounded-xl border bg-card px-3 py-2 text-card-foreground">
      <span className="hidden text-sm font-semibold tracking-tight sm:inline">
        Northfold
      </span>
      <NavigationMenu aria-label="Shop">
        <NavigationMenuList>
          {departments.map((department) => (
            <NavigationMenuItem key={department.title}>
              <NavigationMenuTrigger>{department.title}</NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="grid w-72 gap-3 p-2 sm:w-[30rem] sm:grid-cols-[1fr_12rem]">
                  <div>
                    <p className="px-2 pb-1 text-xs font-medium text-muted-foreground">
                      Shop {department.title.toLowerCase()}
                    </p>
                    <ul className="grid grid-cols-2 gap-0.5 sm:grid-cols-1">
                      {department.categories.map((category) => (
                        <li key={category}>
                          <NavigationMenuLink
                            closeOnClick
                            href={anchor(`${department.title} ${category}`)}
                            className="py-1.5"
                          >
                            {category}
                          </NavigationMenuLink>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <NavigationMenuLink
                    closeOnClick
                    href="#featured"
                    className="flex-col items-stretch gap-2 rounded-lg bg-muted/50 p-2"
                  >
                    <img
                      src="/placeholder.svg"
                      alt=""
                      className="aspect-[4/3] w-full rounded-md bg-muted object-cover"
                    />
                    <span className="flex items-start justify-between gap-2">
                      <span className="flex flex-col">
                        <span className="font-medium">
                          {department.featured.name}
                        </span>
                        <span className="text-xs text-muted-foreground">
                          {department.featured.note}
                        </span>
                      </span>
                      <span className="font-medium tabular-nums">
                        {department.featured.price}
                      </span>
                    </span>
                  </NavigationMenuLink>
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
          ))}
          <NavigationMenuItem>
            <NavigationMenuLink
              href="#sale"
              className={cn(navigationMenuTriggerStyle(), "flex-row gap-1.5")}
            >
              Sale
              <Badge variant="destructive" className="hidden sm:inline-flex">
                −30%
              </Badge>
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
      <Button
        variant="ghost"
        size="icon"
        className="relative"
        aria-label="Shopping bag, 2 items"
      >
        <ShoppingBag aria-hidden="true" />
        <span
          aria-hidden="true"
          className="absolute -top-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full bg-primary text-[0.625rem] font-semibold text-primary-foreground tabular-nums"
        >
          2
        </span>
      </Button>
    </header>
  );
}

TSX
"use client";

import * as React from "react";
import { ChevronRight } from "lucide-react";

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";

type Section = {
  id: string;
  label: string;
  hint: string;
  rows: [string, string][];
};

const groups: { label: string; sections: Section[] }[] = [
  {
    label: "Workspace",
    sections: [
      {
        id: "general",
        label: "General",
        hint: "Name, URL, and default timezone",
        rows: [
          ["Workspace name", "Harbor Studio"],
          ["URL", "harbor.plane.so"],
          ["Timezone", "Europe/Lisbon (UTC+1)"],
        ],
      },
      {
        id: "members",
        label: "Members",
        hint: "Seats, roles, and pending invites",
        rows: [
          ["Seats used", "14 of 20"],
          ["Admins", "3"],
          ["Pending invites", "2"],
        ],
      },
      {
        id: "integrations",
        label: "Integrations",
        hint: "GitHub, Slack, and Figma connections",
        rows: [
          ["GitHub", "Connected to harbor-studio"],
          ["Slack", "Posting to #releases"],
          ["Figma", "Not connected"],
        ],
      },
    ],
  },
  {
    label: "Billing",
    sections: [
      {
        id: "plan",
        label: "Plan",
        hint: "Team plan, billed annually",
        rows: [
          ["Current plan", "Team · $16 per seat"],
          ["Renews", "March 3, 2027"],
          ["Next charge", "$3,840.00"],
        ],
      },
      {
        id: "invoices",
        label: "Invoices",
        hint: "Download receipts for your records",
        rows: [
          ["Latest", "INV-2026-0312 · Paid"],
          ["Billing email", "finance@harbor.studio"],
          ["Tax ID", "PT 514 283 091"],
        ],
      },
      {
        id: "payment",
        label: "Payment method",
        hint: "Card used for renewals",
        rows: [
          ["Card", "Visa ending 4242"],
          ["Expires", "08/28"],
          ["Backup method", "None"],
        ],
      },
    ],
  },
];

export default function NavigationMenu11() {
  const [currentId, setCurrentId] = React.useState("members");
  const group =
    groups.find((g) => g.sections.some((s) => s.id === currentId)) ?? groups[0];
  const section =
    group.sections.find((s) => s.id === currentId) ?? group.sections[0];

  return (
    <section
      aria-labelledby="navigation-menu-11-title"
      className="w-full max-w-lg rounded-xl border bg-card text-card-foreground"
    >
      <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
        <h2 id="navigation-menu-11-title" className="pl-1 text-sm font-semibold">Settings</h2>
        <NavigationMenu aria-label="Settings sections" align="end">
          <NavigationMenuList className="gap-0.5">
            {groups.map((g) => (
              <NavigationMenuItem key={g.label}>
                <NavigationMenuTrigger
                  className={
                    g === group ? "bg-muted text-foreground" : undefined
                  }
                >
                  {g.label}
                </NavigationMenuTrigger>
                <NavigationMenuContent>
                  <ul className="grid w-64 gap-0.5 p-1">
                    {g.sections.map((s) => (
                      <li key={s.id}>
                        <NavigationMenuLink
                          href={`#settings-${s.id}`}
                          active={s.id === currentId}
                          aria-current={s.id === currentId ? "page" : undefined}
                          closeOnClick
                          onClick={(event) => {
                            event.preventDefault();
                            setCurrentId(s.id);
                          }}
                          className="flex-col items-start gap-0.5"
                        >
                          <span className="font-medium">{s.label}</span>
                          <span className="text-xs text-muted-foreground">
                            {s.hint}
                          </span>
                        </NavigationMenuLink>
                      </li>
                    ))}
                  </ul>
                </NavigationMenuContent>
              </NavigationMenuItem>
            ))}
          </NavigationMenuList>
        </NavigationMenu>
      </div>
      <div className="flex flex-col gap-3 p-4">
        <nav aria-label="Breadcrumb">
          <ol className="flex items-center gap-1 text-xs text-muted-foreground">
            <li>{group.label}</li>
            <li aria-hidden="true">
              <ChevronRight className="size-3" />
            </li>
            <li aria-current="page" className="font-medium text-foreground">
              {section.label}
            </li>
          </ol>
        </nav>
        <div>
          <h3 className="text-base font-semibold">
            {section.label}
          </h3>
          <p className="text-sm text-muted-foreground">{section.hint}</p>
        </div>
        <dl className="divide-y rounded-lg border">
          {section.rows.map(([term, value]) => (
            <div
              key={term}
              className="flex flex-wrap items-center justify-between gap-x-4 gap-y-0.5 px-3 py-2 text-sm"
            >
              <dt className="text-muted-foreground">{term}</dt>
              <dd className="font-medium">{value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

TSX
"use client";

import { cn } from "cn";
import {
  ArrowRight,
  CalendarClock,
  Inbox,
  Megaphone,
  Route,
  Users,
  Workflow,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const features = [
  {
    icon: Inbox,
    title: "Shared inbox",
    body: "Email, chat, and WhatsApp in one queue.",
  },
  {
    icon: Route,
    title: "Smart routing",
    body: "Assign by skill, language, or workload.",
  },
  {
    icon: Workflow,
    title: "Automations",
    body: "Close repetitive tickets without a human.",
  },
  {
    icon: CalendarClock,
    title: "SLA tracking",
    body: "Warn agents before a deadline slips.",
  },
];

const solutions = [
  {
    icon: Users,
    title: "Support teams",
    body: "Resolve faster with macros and context.",
  },
  {
    icon: Megaphone,
    title: "Success teams",
    body: "Spot at-risk accounts from ticket trends.",
  },
];

export default function NavigationMenu12() {
  return (
    <header className="flex w-full max-w-3xl items-center justify-between gap-2 rounded-xl border bg-background px-3 py-2">
      <span className="hidden text-sm font-semibold sm:inline">Relaydesk</span>
      <NavigationMenu aria-label="Main">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Product</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="grid w-72 gap-2 p-1 sm:w-[34rem] sm:grid-cols-[1fr_13rem]">
                <ul className="grid gap-0.5">
                  {features.map((feature) => (
                    <li key={feature.title}>
                      <NavigationMenuLink
                        closeOnClick
                        href={`#${feature.title.toLowerCase().replace(" ", "-")}`}
                        className="items-start gap-3"
                      >
                        <span className="flex size-8 shrink-0 items-center justify-center rounded-md border bg-background">
                          <feature.icon aria-hidden="true" />
                        </span>
                        <span className="flex flex-col">
                          <span className="font-medium">{feature.title}</span>
                          <span className="text-xs text-muted-foreground">
                            {feature.body}
                          </span>
                        </span>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
                <NavigationMenuLink
                  closeOnClick
                  href="#changelog"
                  className="hidden flex-col items-start justify-between gap-6 bg-muted p-4 sm:flex"
                >
                  <span className="flex flex-col gap-1.5">
                    <span className="text-xs text-muted-foreground">
                      New in September
                    </span>
                    <span className="text-base leading-snug font-semibold text-balance">
                      AI drafts that cite your help center
                    </span>
                    <span className="text-xs text-muted-foreground">
                      Every suggested reply links the article it came from, so
                      agents can check before sending.
                    </span>
                  </span>
                  <span className="flex items-center gap-1 text-xs font-medium">
                    Read the changelog
                    <ArrowRight className="size-3.5" aria-hidden="true" />
                  </span>
                </NavigationMenuLink>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-72 gap-0.5 p-1">
                {solutions.map((solution) => (
                  <li key={solution.title}>
                    <NavigationMenuLink
                      closeOnClick
                      href={`#${solution.title.toLowerCase().replace(" ", "-")}`}
                      className="items-start gap-3"
                    >
                      <solution.icon
                        className="mt-0.5 text-muted-foreground"
                        aria-hidden="true"
                      />
                      <span className="flex flex-col">
                        <span className="font-medium">{solution.title}</span>
                        <span className="text-xs text-muted-foreground">
                          {solution.body}
                        </span>
                      </span>
                    </NavigationMenuLink>
                  </li>
                ))}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem className="hidden md:block">
            <NavigationMenuLink
              href="#pricing"
              className={cn(navigationMenuTriggerStyle(), "flex-row")}
            >
              Pricing
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
      <div className="flex items-center gap-1">
        <Button variant="ghost" size="sm" className="hidden sm:inline-flex">
          Sign in
        </Button>
        <Button size="sm">
          <span className="sm:hidden">Try free</span>
          <span className="hidden sm:inline">Start free trial</span>
        </Button>
      </div>
    </header>
  );
}

TSX
"use client";

import { cn } from "cn";
import { Mail, MessageCircle, Phone, Search } from "lucide-react";

import { Input } from "@/components/ui/input";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";

const topics = [
  { title: "Getting started", count: 12 },
  { title: "Billing & refunds", count: 18 },
  { title: "Account security", count: 9 },
  { title: "Shipping & returns", count: 21 },
];

const channels = [
  {
    icon: MessageCircle,
    title: "Live chat",
    detail: "Typical reply in 2 minutes",
    status: "Online",
    available: true,
  },
  {
    icon: Mail,
    title: "Email",
    detail: "support@parcelpost.com",
    status: "Within 4h",
    available: true,
  },
  {
    icon: Phone,
    title: "Phone",
    detail: "Mon–Fri, 9:00–18:00 CET",
    status: "Closed",
    available: false,
  },
];

export default function NavigationMenu13() {
  return (
    <section
      aria-labelledby="navigation-menu-13-title"
      className="w-full max-w-xl overflow-hidden rounded-xl border bg-card text-card-foreground"
    >
      <div className="flex items-center justify-between gap-2 border-b px-3 py-2">
        <span className="hidden text-sm font-semibold sm:inline">
          Parcelpost Help
        </span>
        <NavigationMenu aria-label="Help center" align="end">
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Topics</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-60 gap-0.5 p-1">
                  {topics.map((topic) => (
                    <li key={topic.title}>
                      <NavigationMenuLink
                        closeOnClick
                        href={`#${topic.title.toLowerCase().replace(/\W+/g, "-")}`}
                        className="justify-between"
                      >
                        {topic.title}
                        <span className="text-xs text-muted-foreground tabular-nums">
                          {topic.count} articles
                        </span>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Contact</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-72 gap-0.5 p-1">
                  {channels.map((channel) => (
                    <li key={channel.title}>
                      <NavigationMenuLink
                        closeOnClick
                        href={`#contact-${channel.title.toLowerCase().replace(" ", "-")}`}
                        className="items-start gap-3"
                      >
                        <channel.icon
                          className="mt-0.5 text-muted-foreground"
                          aria-hidden="true"
                        />
                        <span className="flex min-w-0 flex-1 flex-col">
                          <span className="font-medium">{channel.title}</span>
                          <span className="truncate text-xs text-muted-foreground">
                            {channel.detail}
                          </span>
                        </span>
                        <span
                          className={cn(
                            "mt-0.5 flex shrink-0 items-center gap-1.5 text-xs",
                            channel.available
                              ? "text-foreground"
                              : "text-muted-foreground",
                          )}
                        >
                          <span
                            aria-hidden="true"
                            className={cn(
                              "size-1.5 rounded-full",
                              channel.available
                                ? "bg-success"
                                : "bg-muted-foreground/50",
                            )}
                          />
                          {channel.status}
                        </span>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink
                href="#status"
                className={cn(navigationMenuTriggerStyle(), "flex-row gap-1.5")}
              >
                <span
                  aria-hidden="true"
                  className="size-2 rounded-full bg-success"
                />
                Status
                <span className="sr-only">: all systems operational</span>
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
      <div className="flex flex-col gap-3 bg-muted/40 px-4 py-6">
        <h3
          id="navigation-menu-13-title"
          className="text-lg font-semibold text-balance"
        >
          How can we help, Dana?
        </h3>
        <div className="relative">
          <Search
            className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
            aria-hidden="true"
          />
          <Input
            type="search"
            aria-label="Search help articles"
            placeholder="Search “change delivery address”"
            className="bg-background pl-8"
          />
        </div>
        <p className="text-xs text-muted-foreground">
          Popular: track a parcel, request a refund, reset two-factor
        </p>
      </div>
    </section>
  );
}