41:T3171,

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

const Demo = () => (
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Browse</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div className="grid w-320 gap-4">
            <NavigationMenuLink href="#">
              iOS apps
              <p>Screens and flows from top iOS apps.</p>
            </NavigationMenuLink>
            <NavigationMenuLink href="#">
              Web apps
              <p>Responsive patterns from the web.</p>
            </NavigationMenuLink>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
        <NavigationMenuContent>
          <div className="grid w-240 gap-4">
            <NavigationMenuLink href="#">Blog</NavigationMenuLink>
            <NavigationMenuLink href="#">Changelog</NavigationMenuLink>
          </div>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="#" className={navigationMenuTriggerStyle}>
          Pricing
        </NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
)

export default Demo

3e:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$41"}}],"$L42"]}] 43:T714b,

"use client"

import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"

import { cn } from "@/lib/utils"

const NavigationMenu = ({
  className,
  children,
  ...props
}: NavigationMenuPrimitive.Root.Props) => (
  <NavigationMenuPrimitive.Root
    data-slot="navigation-menu"
    className={cn("relative flex max-w-max flex-1 items-center", className)}
    {...props}
  >
    {children}
    <NavigationMenuPrimitive.Portal>
      <NavigationMenuPrimitive.Positioner
        sideOffset={8}
        align="start"
        className="z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-300 ease-out data-instant:transition-none"
      >
        <NavigationMenuPrimitive.Popup
          data-slot="navigation-menu-popup"
          className="relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-20 bg-glass-background-primary text-glass-text-primary shadow-glass backdrop-glass transition-[opacity,scale,width,height] duration-300 ease-out outline-none data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-95 data-starting-style:opacity-0"
        >
          <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
        </NavigationMenuPrimitive.Popup>
      </NavigationMenuPrimitive.Positioner>
    </NavigationMenuPrimitive.Portal>
  </NavigationMenuPrimitive.Root>
)

const NavigationMenuList = ({
  className,
  ...props
}: NavigationMenuPrimitive.List.Props) => (
  <NavigationMenuPrimitive.List
    data-slot="navigation-menu-list"
    className={cn("flex flex-1 list-none items-center gap-4", className)}
    {...props}
  />
)

const NavigationMenuItem = ({
  className,
  ...props
}: NavigationMenuPrimitive.Item.Props) => (
  <NavigationMenuPrimitive.Item
    data-slot="navigation-menu-item"
    className={cn("relative", className)}
    {...props}
  />
)

const navigationMenuTriggerStyle =
  "inline-flex h-36 w-max cursor-pointer items-center justify-center gap-4 rounded-full px-12 text-compact-bold text-text-secondary transition-colors ease-out outline-none select-none hover:bg-background-primary-hover hover:text-text-primary focus-visible:ring-4 focus-visible:ring-blue-60/50 disabled:pointer-events-none data-popup-open:bg-background-tertiary data-popup-open:text-text-primary"

const NavigationMenuTrigger = ({
  className,
  children,
  ...props
}: NavigationMenuPrimitive.Trigger.Props) => (
  <NavigationMenuPrimitive.Trigger
    data-slot="navigation-menu-trigger"
    className={cn(navigationMenuTriggerStyle, className)}
    {...props}
  >
    {children}
    <NavigationMenuPrimitive.Icon className="transition-transform duration-200 ease-out data-popup-open:rotate-180">
      <svg
        viewBox="0 0 16 16"
        fill="none"
        className="size-12"
        aria-hidden="true"
      >
        <path
          d="M4 6l4 4 4-4"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </NavigationMenuPrimitive.Icon>
  </NavigationMenuPrimitive.Trigger>
)

const NavigationMenuContent = ({
  className,
  ...props
}: NavigationMenuPrimitive.Content.Props) => (
  <NavigationMenuPrimitive.Content
    data-slot="navigation-menu-content"
    className={cn(
      "h-full w-auto p-8 transition-[opacity,translate] duration-300 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-1/2 data-starting-style:data-[activation-direction=left]:-translate-x-1/2 data-ending-style:data-[activation-direction=right]:-translate-x-1/2 data-starting-style:data-[activation-direction=right]:translate-x-1/2",
      className
    )}
    {...props}
  />
)

const NavigationMenuLink = ({
  className,
  ...props
}: NavigationMenuPrimitive.Link.Props) => (
  <NavigationMenuPrimitive.Link
    data-slot="navigation-menu-link"
    className={cn(
      "flex cursor-pointer flex-col gap-4 rounded-12 px-[10px] py-8 text-body outline-none hover:bg-glass-background-primary-hover focus-visible:bg-glass-background-primary-hover [&_p]:text-compact [&_p]:text-glass-text-secondary",
      className
    )}
    {...props}
  />
)

export {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
}

40:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$43"}}],"$L44"]}]

Installation

Usage