Navigation Menu

"use client"


import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle
} from "@glinui/ui"


export function NavInlineExample() {
  return (
    <div className="mx-auto min-h-56 w-full max-w-xl">
      <NavigationMenu aria-label="Docs" viewport={false} defaultValue="learn" className="max-w-none justify-start">
        <NavigationMenuList>
          <NavigationMenuItem value="learn" className="relative">
            <NavigationMenuTrigger>Learn</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-60 gap-1 p-1">
                <li><NavigationMenuLink href="#"><span className="block text-sm font-medium">Quickstart</span><span className="block text-xs text-[var(--color-muted)]">Ship a first page in 5 minutes.</span></NavigationMenuLink></li>
                <li><NavigationMenuLink href="#"><span className="block text-sm font-medium">Theming</span><span className="block text-xs text-[var(--color-muted)]">Tokens, modes and variants.</span></NavigationMenuLink></li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>Components</NavigationMenuLink>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>Examples</NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="grid gap-x-6 gap-y-2 sm:grid-cols-2">
      {variants.map((variant) => (
        <div key={variant} className="min-h-40">
          <NavigationMenu aria-label={`${variant} navigation`} variant={variant}>
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>{variant}</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div className="grid w-48 gap-1">
                    <NavigationMenuLink href="#">Analytics</NavigationMenuLink>
                    <NavigationMenuLink href="#">Automation</NavigationMenuLink>
                  </div>
                </NavigationMenuContent>
              </NavigationMenuItem>
              <NavigationMenuItem>
                <NavigationMenuLink href="#" active>Docs</NavigationMenuLink>
              </NavigationMenuItem>
            </NavigationMenuList>
          </NavigationMenu>
        </div>
      ))}
    </div>
  )
}

import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@glinui/ui"


export function Demo() {
  return (
    <NavigationMenu aria-label="Main" variant="glass">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="grid w-64 gap-1">
              <NavigationMenuLink href="#">Analytics</NavigationMenuLink>
              <NavigationMenuLink href="#">Automation</NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>Docs</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}