Basic navigation menu.

<script setup lang="ts">
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"
</script>

<template>
  <div class="flex items-center justify-center">
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="w-80">
              <li>
                <NavigationMenuLink as-child>
                  <a href="#">
                    <div class="flex flex-col gap-1 px-1">
                      <div class="font-medium">Introduction</div>
                      <div class="text-muted-foreground line-clamp-2 text-sm">
                        Re-usable components built with Tailwind CSS.
                      </div>
                    </div>
                  </a>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink as-child>
                  <a href="#">
                    <div class="flex flex-col gap-1 px-1">
                      <div class="font-medium">Installation</div>
                      <div class="text-muted-foreground line-clamp-2 text-sm">
                        How to install dependencies and structure your app.
                      </div>
                    </div>
                  </a>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink as-child :class="navigationMenuTriggerStyle()">
            <a href="#">Documentation</a>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </div>
</template>