Navigation Menu

Copy<script setup lang="ts">
import {
  VNavigationMenu,
  VNavigationMenuContent,
  VNavigationMenuItem,
  VNavigationMenuLink,
  VNavigationMenuList,
  VNavigationMenuTrigger,
  VNavigationMenuViewport,
} from '@ui-kit/src/components/Base/VNavigationMenu'

const componentLinks = [
  {
    description: 'Solid product primitives for calls to action.',
    href: '/docs/components/button',
    title: 'Button',
  },
  {
    description: 'Structured containers for dense product content.',
    href: '/docs/components/card',
    title: 'Card',
  },
  {
    description: 'Overlay primitives for confirmations and flows.',
    href: '/docs/components/dialog',
    title: 'Dialog',
  },
]
</script>

<template>
  <VNavigationMenu :viewport="false" class="w-full max-w-2xl">
    <VNavigationMenuList class="flex flex-wrap items-center gap-3">
      <VNavigationMenuItem>
        <VNavigationMenuTrigger>
          Product
        </VNavigationMenuTrigger>
        <VNavigationMenuContent class="mt-2 w-80">
          <div class="grid gap-3 p-4">
            <p>Webdevelop UI Kit</p>
            <p>
              Branded base components wrapped in thin docs-specific examples.
            </p>
          </div>
        </VNavigationMenuContent>
      </VNavigationMenuItem>

      <VNavigationMenuItem>
        <VNavigationMenuTrigger>
          Components
        </VNavigationMenuTrigger>
        <VNavigationMenuContent class="mt-2 w-96">
          <ul class="grid gap-3">
            <li v-for="component in componentLinks" :key="component.href">
              <VNavigationMenuLink :href="component.href" class="flex flex-col gap-1 p-2">
                <span>{{ component.title }}</span>
                <span>{{ component.description }}</span>
              </VNavigationMenuLink>
            </li>
          </ul>
        </VNavigationMenuContent>
      </VNavigationMenuItem>

      <VNavigationMenuItem>
        <VNavigationMenuLink href="/docs/components" class="px-2 py-2">
          Docs
        </VNavigationMenuLink>
      </VNavigationMenuItem>
    </VNavigationMenuList>
    <VNavigationMenuViewport />
  </VNavigationMenu>
</template>