Navigation Menu

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

const components = [
  {
    title: "Alert",
    href: "/components/alert/",
    description:
      "Displays important messages with title and description content.",
  },
  {
    title: "Sheet",
    href: "/components/sheet/",
    description: "A side panel component built on top of dialog primitives.",
  },
  {
    title: "Native Select",
    href: "/components/native-select/",
    description:
      "A styled native select element for choosing one option from a list.",
  },
  {
    title: "Tabs",
    href: "/components/tabs/",
    description:
      "A set of layered sections of content displayed one at a time.",
  },
]
---

<div class="min-h-96 overflow-visible">
  <NavigationMenu>
    <NavigationMenuList class="flex-wrap gap-1">
      <NavigationMenuItem value="getting-started">
        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="w-96 p-1">
            <li>
              <NavigationMenuLink
                href="/docs/"
                class="w-full flex-col items-start"
              >
                <span class="leading-none font-medium">Introduction</span>
                <span class="text-muted-foreground line-clamp-2 text-sm">
                  Re-usable components built with Tailwind CSS.
                </span>
              </NavigationMenuLink>
            </li>
            <li>
              <NavigationMenuLink
                href="/docs/installation/"
                class="w-full flex-col items-start"
              >
                <span class="leading-none font-medium">Installation</span>
                <span class="text-muted-foreground line-clamp-2 text-sm">
                  How to install dependencies and structure your app.
                </span>
              </NavigationMenuLink>
            </li>
            <li>
              <NavigationMenuLink
                href="/components/typography/"
                class="w-full flex-col items-start"
              >
                <span class="leading-none font-medium">Typography</span>
                <span class="text-muted-foreground line-clamp-2 text-sm">
                  Styles for headings, paragraphs, lists, and more.
                </span>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem value="components" class="hidden md:block">
        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul
            class="grid w-[400px] gap-2 p-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]"
          >
            {
              components.map((component) => (
                <li>
                  <NavigationMenuLink
                    href={component.href}
                    class="w-full flex-col items-start"
                  >
                    <span class="leading-none font-medium">
                      {component.title}
                    </span>
                    <span class="text-muted-foreground line-clamp-2 text-sm">
                      {component.description}
                    </span>
                  </NavigationMenuLink>
                </li>
              ))
            }
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem value="docs">
        <NavigationMenuLink href="/docs/" class={navigationMenuTriggerStyle()}>
          Docs
        </NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>