2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T1fa6,"use client"; import { ChevronDown } from "lucide-react"; import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui"; import { createContext, useContext, useLayoutEffect, useRef, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/lib/utils"; type Variant = "solid" | "glass"; const VariantContext = createContext("solid"); const SURFACE = { solid: "bg-white shadow-[0_20px_48px_-16px_rgb(0_0_0/0.22),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-[0_20px_48px_-12px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]", glass: "bg-white/75 shadow-[0_20px_48px_-16px_rgb(0_0_0/0.25),inset_0_1px_0_rgb(255_255_255/0.6)] ring-1 ring-black/[0.08] backdrop-blur-xl backdrop-saturate-150 dark:bg-neutral-900/75 dark:shadow-[0_20px_48px_-12px_rgb(0_0_0/0.7),inset_0_1px_0_rgb(255_255_255/0.06)] dark:ring-white/[0.1]", } as const; const TOP = "flex h-9 select-none items-center gap-1 rounded-full px-3.5 text-[13.5px] font-medium tracking-[-0.01em] text-neutral-600 no-underline outline-none transition-colors duration-150 hover:bg-neutral-950/[0.04] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 data-[state=open]:bg-neutral-950/[0.05] data-[state=open]:text-neutral-950 data-active:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white dark:focus-visible:bg-white/[0.08] dark:focus-visible:text-white dark:data-[state=open]:bg-white/[0.08] dark:data-[state=open]:text-white dark:data-active:text-white"; export interface NavigationMenuProps extends ComponentProps { /** solid: a white panel · glass: translucent with a background blur. */ variant?: Variant; } /** * Site navigation with dropdown panels. One shared panel resizes to fit each menu and glides under the * trigger that opened it. */ export function NavigationMenu({ variant = "solid", className, children, ...props }: NavigationMenuProps) { const nav = useRef(null); const shell = useRef(null); const viewport = useRef(null); useLayoutEffect(() => { const root = nav.current; const wrap = shell.current; const panel = viewport.current; if (!root || !wrap || !panel) return; let placed = false; const place = () => { if (panel.dataset.state !== "open") { placed = false; return; } const trigger = root.querySelector('[data-nav-trigger][data-state="open"]'); const width = parseFloat(panel.style.getPropertyValue("--radix-navigation-menu-viewport-width")); if (!trigger || !width) return; const box = root.getBoundingClientRect(); const t = trigger.getBoundingClientRect(); const ideal = t.left + t.width / 2 - width / 2 - box.left; const x = Math.max(12 - box.left, Math.min(ideal, document.documentElement.clientWidth - 12 - width - box.left)); wrap.style.transition = placed ? "transform 320ms cubic-bezier(0.22, 1, 0.36, 1)" : "none"; wrap.style.transform = `translateX(${Math.round(x)}px)`; placed = true; }; place(); const observer = new MutationObserver((records) => records.some((r) => r.target !== wrap) && place()); observer.observe(root, { attributes: true, subtree: true, attributeFilter: ["data-state", "style"] }); return () => observer.disconnect(); }, []); return ( {children}

); } export function NavigationMenuList({ className, ...props }: ComponentProps) { return ; } export const NavigationMenuItem = NavigationMenuPrimitive.Item; export function NavigationMenuTrigger({ className, children, ...props }: ComponentProps) { return ( {children} ); } export function NavigationMenuContent({ className, ...props }: ComponentProps) { return ( ); } export interface NavigationMenuLinkProps extends ComponentProps { /** top: styled like a trigger, for links in the bar itself · plain: no styles, for links inside a panel. */ variant?: "top" | "plain"; } export function NavigationMenuLink({ variant = "plain", className, ...props }: NavigationMenuLinkProps) { return ; } export interface NavigationMenuTileProps extends Omit, "title"> { icon?: ReactNode; title: ReactNode; description?: ReactNode; } /** A link inside a panel: a raised icon, a title and a line of description. */ export function NavigationMenuTile({ icon, title, description, className, ...props }: NavigationMenuTileProps) { const variant = useContext(VariantContext); return ( {icon && ( {icon} )} {title} {description && {description}} ); } export default NavigationMenu; 2e:Te2c2,

"use client";

import { ChevronDown } from "lucide-react";
import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui";
import { createContext, useContext, useLayoutEffect, useRef, type ComponentProps, type ReactNode } from "react";
import { cn } from "@/lib/utils";

type Variant = "solid" | "glass";

const VariantContext = createContext<Variant>("solid");

const SURFACE = {
  solid:
    "bg-white shadow-[0_20px_48px_-16px_rgb(0_0_0/0.22),0_2px_6px_rgb(0_0_0/0.05)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-[0_20px_48px_-12px_rgb(0_0_0/0.7)] dark:ring-white/[0.1]",
  glass:
    "bg-white/75 shadow-[0_20px_48px_-16px_rgb(0_0_0/0.25),inset_0_1px_0_rgb(255_255_255/0.6)] ring-1 ring-black/[0.08] backdrop-blur-xl backdrop-saturate-150 dark:bg-neutral-900/75 dark:shadow-[0_20px_48px_-12px_rgb(0_0_0/0.7),inset_0_1px_0_rgb(255_255_255/0.06)] dark:ring-white/[0.1]",
} as const;

const TOP =
  "flex h-9 select-none items-center gap-1 rounded-full px-3.5 text-[13.5px] font-medium tracking-[-0.01em] text-neutral-600 no-underline outline-none transition-colors duration-150 hover:bg-neutral-950/[0.04] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 data-[state=open]:bg-neutral-950/[0.05] data-[state=open]:text-neutral-950 data-active:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white dark:focus-visible:bg-white/[0.08] dark:focus-visible:text-white dark:data-[state=open]:bg-white/[0.08] dark:data-[state=open]:text-white dark:data-active:text-white";

export interface NavigationMenuProps extends ComponentProps<typeof NavigationMenuPrimitive.Root> {
  /** solid: a white panel · glass: translucent with a background blur. */
  variant?: Variant;
}

/**
 * Site navigation with dropdown panels. One shared panel resizes to fit each menu and glides under the
 * trigger that opened it.
 */
export function NavigationMenu({ variant = "solid", className, children, ...props }: NavigationMenuProps) {
  const nav = useRef<HTMLElement>(null);
  const shell = useRef<HTMLDivElement>(null);
  const viewport = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const root = nav.current;
    const wrap = shell.current;
    const panel = viewport.current;
    if (!root || !wrap || !panel) return;
    let placed = false;
    const place = () => {
      if (panel.dataset.state !== "open") {
        placed = false;
        return;
      }
      const trigger = root.querySelector<HTMLElement>('[data-nav-trigger][data-state="open"]');
      const width = parseFloat(panel.style.getPropertyValue("--radix-navigation-menu-viewport-width"));
      if (!trigger || !width) return;
      const box = root.getBoundingClientRect();
      const t = trigger.getBoundingClientRect();
      const ideal = t.left + t.width / 2 - width / 2 - box.left;
      const x = Math.max(12 - box.left, Math.min(ideal, document.documentElement.clientWidth - 12 - width - box.left));
      wrap.style.transition = placed ? "transform 320ms cubic-bezier(0.22, 1, 0.36, 1)" : "none";
      wrap.style.transform = `translateX(${Math.round(x)}px)`;
      placed = true;
    };
    place();
    const observer = new MutationObserver((records) => records.some((r) => r.target !== wrap) && place());
    observer.observe(root, { attributes: true, subtree: true, attributeFilter: ["data-state", "style"] });
    return () => observer.disconnect();
  }, []);

  return (
    <VariantContext.Provider value={variant}>
      <NavigationMenuPrimitive.Root ref={nav} className={cn("relative z-10 flex h-fit", className)} {...props}>
        {children}
        <div ref={shell} className="absolute left-0 top-full pt-2">
          <NavigationMenuPrimitive.Viewport
            forceMount
            ref={viewport}
            className={cn(
              "relative h-(--radix-navigation-menu-viewport-height) w-(--radix-navigation-menu-viewport-width) origin-top overflow-hidden rounded-[20px] text-neutral-950 dark:text-white",
              "transition-[width,height,opacity,scale,visibility] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-opacity",
              "data-[state=closed]:invisible data-[state=closed]:scale-[0.97] data-[state=closed]:opacity-0 data-[state=closed]:duration-150",
              SURFACE[variant],
            )}
          />
        </div>
      </NavigationMenuPrimitive.Root>
    </VariantContext.Provider>
  );
}

export function NavigationMenuList({ className, ...props }: ComponentProps<typeof NavigationMenuPrimitive.List>) {
  return <NavigationMenuPrimitive.List className={cn("m-0 flex list-none items-center gap-0.5 p-0", className)} {...props} />;
}

export const NavigationMenuItem = NavigationMenuPrimitive.Item;

export function NavigationMenuTrigger({ className, children, ...props }: ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
  return (
    <NavigationMenuPrimitive.Trigger data-nav-trigger="" className={cn("group", TOP, className)} {...props}>
      {children}
      <ChevronDown aria-hidden className="size-3.5 text-neutral-400 transition-transform duration-200 group-data-[state=open]:rotate-180" />
    </NavigationMenuPrimitive.Trigger>
  );
}

export function NavigationMenuContent({ className, ...props }: ComponentProps<typeof NavigationMenuPrimitive.Content>) {
  return (
    <NavigationMenuPrimitive.Content
      className={cn(
        "absolute left-0 top-0 w-max p-2 transition-[opacity,translate] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
        "starting:opacity-0 data-[motion=from-end]:starting:translate-x-6 data-[motion=from-start]:starting:-translate-x-6 motion-reduce:starting:translate-x-0",
        className,
      )}
      {...props}
    />
  );
}

export interface NavigationMenuLinkProps extends ComponentProps<typeof NavigationMenuPrimitive.Link> {
  /** top: styled like a trigger, for links in the bar itself · plain: no styles, for links inside a panel. */
  variant?: "top" | "plain";
}

export function NavigationMenuLink({ variant = "plain", className, ...props }: NavigationMenuLinkProps) {
  return <NavigationMenuPrimitive.Link className={cn(variant === "top" && TOP, className)} {...props} />;
}

export interface NavigationMenuTileProps extends Omit<ComponentProps<typeof NavigationMenuPrimitive.Link>, "title"> {
  icon?: ReactNode;
  title: ReactNode;
  description?: ReactNode;
}

/** A link inside a panel: a raised icon, a title and a line of description. */
export function NavigationMenuTile({ icon, title, description, className, ...props }: NavigationMenuTileProps) {
  const variant = useContext(VariantContext);
  return (
    <NavigationMenuPrimitive.Link
      className={cn(
        "group/tile flex gap-3 rounded-[14px] p-2.5 no-underline outline-none transition-colors duration-150",
        variant === "glass" ? "hover:bg-white/60 focus-visible:bg-white/70 dark:hover:bg-white/[0.06]" : "hover:bg-neutral-950/[0.035] focus-visible:bg-neutral-950/[0.05] dark:hover:bg-white/[0.05]",
        "data-active:bg-neutral-950/[0.05] dark:data-active:bg-white/[0.08] dark:focus-visible:bg-white/[0.07]",
        className,
      )}
      {...props}
    >
      {icon && (
        <span className="flex size-9 shrink-0 items-center justify-center rounded-[11px] bg-white text-neutral-600 shadow-[inset_0_0_0_1px_rgb(0_0_0/0.07),inset_0_-2px_0_rgb(0_0_0/0.04),0_1px_2px_rgb(0_0_0/0.08)] transition-colors group-hover/tile:text-neutral-950 dark:bg-neutral-800 dark:text-neutral-300 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.08),inset_0_1px_0_rgb(255_255_255/0.1),0_1px_2px_rgb(0_0_0/0.4)] dark:group-hover/tile:text-white [&_svg]:size-[18px]">
          {icon}
        </span>
      )}
      <span className="min-w-0">
        <span className="block text-[13.5px] font-medium tracking-[-0.01em] text-neutral-950 dark:text-white">{title}</span>
        {description && <span className="mt-0.5 block text-[12.5px] leading-snug text-neutral-500 dark:text-neutral-400">{description}</span>}
      </span>
    </NavigationMenuPrimitive.Link>
  );
}

export default NavigationMenu;

2f:T10e5,import { BarChart3, BookOpen, Boxes, Code2, CreditCard, LifeBuoy, Megaphone, Newspaper, ShieldCheck, Workflow } from "lucide-react"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTile, NavigationMenuTrigger, } from "@/components/scalar-ui/navigation-menu"; export default function Demo() { return (

Aurora Product

} title="Analytics" description="Dashboards for every team." /> } title="Automations" description="Run work while you sleep." /> } title="Integrations" description="140+ tools, two clicks away." /> } title="Security" description="SSO, audit logs and SOC 2." />

Aurora 4.0 is out: faster sync and a new editor. Read more

Developers

} title="Documentation" description="Guides and references." /> } title="API" description="REST and webhooks." /> } title="Changelog" description="What shipped this week." />

Company

} title="Support" description="We reply within a day." /> } title="Customers" description="Stories from teams on Aurora." />

Pricing Sign up

); } 30:T7d83,

import { BarChart3, BookOpen, Boxes, Code2, CreditCard, LifeBuoy, Megaphone, Newspaper, ShieldCheck, Workflow } from "lucide-react";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTile,
  NavigationMenuTrigger,
} from "@/components/scalar-ui/navigation-menu";

export default function Demo() {
  return (
    <div className="flex h-[420px] w-full justify-center">
      <div className="flex h-12 items-center gap-2 rounded-full bg-white py-1.5 pl-4 pr-1.5 shadow-[0_1px_2px_rgb(0_0_0/0.05),0_4px_12px_-4px_rgb(0_0_0/0.08)] ring-1 ring-black/[0.07] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.1]">
        <span className="mr-2 flex items-center gap-2 text-[14px] font-semibold tracking-[-0.02em] text-neutral-950 dark:text-white">
          <span className="size-5 rounded-[6px] bg-neutral-950 dark:bg-white" />
          Aurora
        </span>
        <NavigationMenu aria-label="Main">
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Product</NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="grid w-[520px] grid-cols-2 gap-0.5">
                  <NavigationMenuTile href="#" icon={<BarChart3 />} title="Analytics" description="Dashboards for every team." />
                  <NavigationMenuTile href="#" icon={<Workflow />} title="Automations" description="Run work while you sleep." />
                  <NavigationMenuTile href="#" icon={<Boxes />} title="Integrations" description="140+ tools, two clicks away." />
                  <NavigationMenuTile href="#" icon={<ShieldCheck />} title="Security" description="SSO, audit logs and SOC 2." />
                </div>
                <div className="mt-1.5 flex items-center justify-between rounded-[14px] bg-neutral-950/[0.03] px-3.5 py-2.5 text-[12.5px] dark:bg-white/[0.04]">
                  <span className="flex items-center gap-2 text-neutral-600 dark:text-neutral-300">
                    <Megaphone className="size-3.5" /> Aurora 4.0 is out: faster sync and a new editor.
                  </span>
                  <NavigationMenuLink href="#" className="font-medium text-neutral-950 underline-offset-2 outline-none hover:underline focus-visible:underline dark:text-white">
                    Read more
                  </NavigationMenuLink>
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Developers</NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="grid w-[300px] gap-0.5">
                  <NavigationMenuTile href="#" icon={<BookOpen />} title="Documentation" description="Guides and references." />
                  <NavigationMenuTile href="#" icon={<Code2 />} title="API" description="REST and webhooks." />
                  <NavigationMenuTile href="#" icon={<Newspaper />} title="Changelog" description="What shipped this week." />
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Company</NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="grid w-[240px] gap-0.5">
                  <NavigationMenuTile href="#" icon={<LifeBuoy />} title="Support" description="We reply within a day." />
                  <NavigationMenuTile href="#" icon={<CreditCard />} title="Customers" description="Stories from teams on Aurora." />
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink variant="top" href="#">
                Pricing
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
        <a
          href="#"
          className="ml-2 flex h-9 items-center rounded-full bg-neutral-950 px-4 text-[13px] font-medium text-white outline-none transition-colors hover:bg-neutral-800 focus-visible:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-200"
        >
          Sign up
        </a>
      </div>
    </div>
  );
}

31:T6e4,import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, } from "@/components/scalar-ui/navigation-menu"; const menus = { Docs: ["Getting started", "Installation", "Theming", "Components", "Changelog"], Company: ["About", "Careers", "Press", "Contact"], }; const link = "flex h-8 items-center rounded-[10px] px-2.5 text-[13px] text-neutral-600 no-underline outline-none transition-colors hover:bg-neutral-950/[0.04] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white"; export default function Example() { return (

{Object.entries(menus).map(([name, items]) => ( {name}

{item}

))} Blog

); } 32:T3b4e,

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

const menus = {
  Docs: ["Getting started", "Installation", "Theming", "Components", "Changelog"],
  Company: ["About", "Careers", "Press", "Contact"],
};

const link =
  "flex h-8 items-center rounded-[10px] px-2.5 text-[13px] text-neutral-600 no-underline outline-none transition-colors hover:bg-neutral-950/[0.04] hover:text-neutral-950 focus-visible:bg-neutral-950/[0.06] focus-visible:text-neutral-950 dark:text-neutral-400 dark:hover:bg-white/[0.06] dark:hover:text-white";

export default function Example() {
  return (
    <div className="flex h-[300px] w-full justify-center">
      <NavigationMenu aria-label="Docs">
        <NavigationMenuList>
          {Object.entries(menus).map(([name, items]) => (
            <NavigationMenuItem key={name}>
              <NavigationMenuTrigger>{name}</NavigationMenuTrigger>
              <NavigationMenuContent className="p-1.5">
                <ul className="m-0 grid w-[200px] list-none p-0">
                  {items.map((item) => (
                    <li key={item}>
                      <NavigationMenuLink href="#" className={link}>
                        {item}
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          ))}
          <NavigationMenuItem>
            <NavigationMenuLink variant="top" href="#">
              Blog
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  );
}

33:Taee,import { Building2, Rocket, ShoppingBag, Store } from "lucide-react"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTile, NavigationMenuTrigger, } from "@/components/scalar-ui/navigation-menu"; export default function Example() { return (

Solutions

Case study How Northwind cut churn by 31%

} title="Startups" description="Free for your first year." /> } title="Enterprise" description="Controls for large teams." /> } title="Commerce" description="Track orders and returns." /> } title="Marketplaces" description="Payouts for every seller." />

Pricing Customers

); } 34:T5030,

import { Building2, Rocket, ShoppingBag, Store } from "lucide-react";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTile,
  NavigationMenuTrigger,
} from "@/components/scalar-ui/navigation-menu";

export default function Example() {
  return (
    <div className="flex h-[400px] w-full justify-center">
      <NavigationMenu aria-label="Solutions">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div className="flex w-[540px] gap-2">
                <NavigationMenuLink
                  href="#"
                  className="group/feature relative flex w-[200px] shrink-0 flex-col justify-end overflow-hidden rounded-[14px] p-4 no-underline outline-none"
                >
                  <img
                    src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=400&h=520&fit=crop&auto=format&q=70"
                    alt=""
                    className="absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover/feature:scale-[1.03]"
                  />
                  <span className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/10 to-transparent" />
                  <span className="relative text-[11.5px] font-medium uppercase tracking-[0.08em] text-white/70">Case study</span>
                  <span className="relative mt-1 text-[15px] font-semibold leading-snug tracking-[-0.01em] text-white">How Northwind cut churn by 31%</span>
                </NavigationMenuLink>
                <div className="grid flex-1 content-start gap-0.5">
                  <NavigationMenuTile href="#" icon={<Rocket />} title="Startups" description="Free for your first year." />
                  <NavigationMenuTile href="#" icon={<Building2 />} title="Enterprise" description="Controls for large teams." />
                  <NavigationMenuTile href="#" icon={<ShoppingBag />} title="Commerce" description="Track orders and returns." />
                  <NavigationMenuTile href="#" icon={<Store />} title="Marketplaces" description="Payouts for every seller." />
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink variant="top" href="#">
              Pricing
            </NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink variant="top" href="#">
              Customers
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  );
}

35:T937,import { Compass, Layers, Map, Mountain, Tent, Trees } from "lucide-react"; import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuList, NavigationMenuTile, NavigationMenuTrigger, } from "@/components/scalar-ui/navigation-menu"; export default function Example() { return (

Explore

} title="Peaks" description="Summits over 3,000 m." /> } title="Forests" description="Shaded, easy trails." /> } title="Camps" description="Book a pitch tonight." /> } title="Routes" description="Offline maps and GPX." />

Plan

} title="Trip planner" description="Days, stops and gear." /> } title="Weather layers" description="Wind, snow and rain." />

); } 36:T4d5d,

import { Compass, Layers, Map, Mountain, Tent, Trees } from "lucide-react";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuTile,
  NavigationMenuTrigger,
} from "@/components/scalar-ui/navigation-menu";

export default function Example() {
  return (
    <div className="relative flex h-[380px] w-full max-w-[640px] justify-center overflow-hidden rounded-[22px] pt-5">
      <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1280&h=760&fit=crop&auto=format&q=70" alt="" className="absolute inset-0 size-full object-cover" />
      <div className="relative h-fit p-1">
        <span aria-hidden className="absolute inset-0 rounded-full bg-white/70 shadow-[0_8px_24px_-8px_rgb(0_0_0/0.25)] ring-1 ring-white/50 backdrop-blur-xl dark:bg-neutral-900/70 dark:ring-white/10" />
        <NavigationMenu variant="glass" aria-label="Explore">
          <NavigationMenuList>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Explore</NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="grid w-[440px] grid-cols-2 gap-0.5">
                  <NavigationMenuTile href="#" icon={<Mountain />} title="Peaks" description="Summits over 3,000 m." />
                  <NavigationMenuTile href="#" icon={<Trees />} title="Forests" description="Shaded, easy trails." />
                  <NavigationMenuTile href="#" icon={<Tent />} title="Camps" description="Book a pitch tonight." />
                  <NavigationMenuTile href="#" icon={<Map />} title="Routes" description="Offline maps and GPX." />
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuTrigger>Plan</NavigationMenuTrigger>
              <NavigationMenuContent>
                <div className="grid w-[260px] gap-0.5">
                  <NavigationMenuTile href="#" icon={<Compass />} title="Trip planner" description="Days, stops and gear." />
                  <NavigationMenuTile href="#" icon={<Layers />} title="Weather layers" description="Wind, snow and rain." />
                </div>
              </NavigationMenuContent>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
    </div>
  );
}

29:["$","section","navigation-menu",{"id":"navigation-menu","aria-labelledby":"navigation-menu-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"navigation-menu-title","className":"sr-only","children":"Navigation Menu"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"navigation-menu","gated":{"unlocked":true,"files":[{"name":"navigation-menu.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"simple":{"name":"simple.tsx","code":"$31","html":"$32"},"featured":{"name":"featured.tsx","code":"$33","html":"$34"},"glass":{"name":"glass.tsx","code":"$35","html":"$36"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add navigation-menu","shadcn":"npx shadcn@latest add https://scalarui.com/r/navigation-menu.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L37","toolbar":"$L38"}]}],["$L39","$L3a","$L3b"]]}]

Navigation Menus

Navigation Menus

Simple Lists

Featured

Glass