# Navigation Menu

Navigation Menu provides Runtime-backed navigation disclosure, focus management, and floating
content positioning.

NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
navigationMenuTriggerStyle,
} from "@/components/starwind/navigation-menu";

export const components = [
{
title: "Alert Dialog",
href: "/docs/components/alert-dialog/",
description:
  "A modal dialog that interrupts the user with important content and expects a response.",
},
{
title: "Hover Card",
href: "/docs/components/hover-card/",
description: "For sighted users to preview content available behind a link.",
},
{
title: "Progress",
href: "/docs/components/progress/",
description: "Displays an indicator showing the completion progress of a task.",
},
{
title: "Scroll Area",
href: "/docs/components/scroll-area/",
description: "Augments native scroll functionality for custom, cross-browser styling.",
},
{
title: "Tabs",
href: "/docs/components/tabs/",
description: "A set of layered sections of content displayed one at a time.",
},
{
title: "Tooltip",
href: "/docs/components/tooltip/",
description: "A popup that provides information when an element is focused or hovered.",
},
];

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/starwind/navigation-menu";
import AlertCircle from "@tabler/icons/outline/alert-circle.svg";
import CircleCheck from "@tabler/icons/outline/circle-check.svg";
import CircleDashed from "@tabler/icons/outline/circle-dashed.svg";

const components = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog/",
    description:
      "A modal dialog that interrupts the user with important content and expects a response.",
  },
  {
    title: "Hover Card",
    href: "/docs/components/hover-card/",
    description: "For sighted users to preview content available behind a link.",
  },
  {
    title: "Progress",
    href: "/docs/components/progress/",
    description: "Displays an indicator showing the completion progress of a task.",
  },
  {
    title: "Scroll Area",
    href: "/docs/components/scroll-area/",
    description: "Augments native scroll functionality for custom, cross-browser styling.",
  },
  {
    title: "Tabs",
    href: "/docs/components/tabs/",
    description: "A set of layered sections of content displayed one at a time.",
  },
  {
    title: "Tooltip",
    href: "/docs/components/tooltip/",
    description: "A popup that provides information when an element is focused or hovered.",
  },
];
---

<NavigationMenu size="md" aria-label="Documentation navigation">
  <NavigationMenuList>
    <NavigationMenuItem value="getting-started">
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="w-108">
          <li>
            <NavigationMenuLink href="/docs/getting-started/introduction/">
              <div class="flex flex-col gap-1.5">
                <div class="leading-none font-medium">Introduction</div>
                <div class="text-muted-foreground line-clamp-2">
                  Reusable components built with Tailwind CSS.
                </div>
              </div>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/docs/getting-started/installation/">
              <div class="flex flex-col gap-1.5">
                <div class="leading-none font-medium">Installation</div>
                <div class="text-muted-foreground line-clamp-2">
                  How to install dependencies and structure your app.
                </div>
              </div>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/docs/getting-started/theming/">
              <div class="flex flex-col gap-1.5">
                <div class="leading-none font-medium">Theming</div>
                <div class="text-muted-foreground line-clamp-2">
                  Customize colors, typography, and design tokens.
                </div>
              </div>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="components" class="hidden md:flex">
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[500px] gap-2 md:w-[600px] md:grid-cols-2 lg:w-[700px]">
          {components.map((component) => (
            <li>
              <NavigationMenuLink href={component.href}>
                <div class="flex flex-col gap-1.5">
                  <div class="leading-none font-medium">{component.title}</div>
                  <div class="text-muted-foreground line-clamp-2">
                    {component.description}
                  </div>
                </div>
              </NavigationMenuLink>
            </li>
          ))}
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem value="status">
      <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul class="grid w-[240px]">
          <li>
            <NavigationMenuLink href="#backlog" class="flex-row items-center gap-2">
              <AlertCircle />Backlog
            </NavigationMenuLink>
            <NavigationMenuLink href="#to-do" class="flex-row items-center gap-2">
              <CircleDashed />To Do
            </NavigationMenuLink>
            <NavigationMenuLink href="#done" class="flex-row items-center gap-2">
              <CircleCheck />Done
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs/" class={navigationMenuTriggerStyle()}>
        Docs
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```
  </div>
  <div slot="react">
```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/starwind/navigation-menu";
import {
  IconAlertCircle as AlertCircle,
  IconCircleCheck as CircleCheck,
  IconCircleDashed as CircleDashed,
} from "@tabler/icons-react";

const components = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog/",
    description:
      "A modal dialog that interrupts the user with important content and expects a response.",
  },
  {
    title: "Hover Card",
    href: "/docs/components/hover-card/",
    description: "For sighted users to preview content available behind a link.",
  },
  {
    title: "Progress",
    href: "/docs/components/progress/",
    description: "Displays an indicator showing the completion progress of a task.",
  },
  {
    title: "Scroll Area",
    href: "/docs/components/scroll-area/",
    description: "Augments native scroll functionality for custom, cross-browser styling.",
  },
  {
    title: "Tabs",
    href: "/docs/components/tabs/",
    description: "A set of layered sections of content displayed one at a time.",
  },
  {
    title: "Tooltip",
    href: "/docs/components/tooltip/",
    description: "A popup that provides information when an element is focused or hovered.",
  },
];

export function Example() {
  return (
    <>
      <NavigationMenu size="md" aria-label="Documentation navigation">
        <NavigationMenuList>
          <NavigationMenuItem value="getting-started">
            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="w-108">
                <li>
                  <NavigationMenuLink href="/docs/getting-started/introduction/">
                    <div className="flex flex-col gap-1.5">
                      <div className="leading-none font-medium">Introduction</div>
                      <div className="text-muted-foreground line-clamp-2">
                        Reusable components built with Tailwind CSS.
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink href="/docs/getting-started/installation/">
                    <div className="flex flex-col gap-1.5">
                      <div className="leading-none font-medium">Installation</div>
                      <div className="text-muted-foreground line-clamp-2">
                        How to install dependencies and structure your app.
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
                <li>
                  <NavigationMenuLink href="/docs/getting-started/theming/">
                    <div className="flex flex-col gap-1.5">
                      <div className="leading-none font-medium">Theming</div>
                      <div className="text-muted-foreground line-clamp-2">
                        Customize colors, typography, and design tokens.
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem value="components" className="hidden md:flex">
            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[500px] gap-2 md:w-[600px] md:grid-cols-2 lg:w-[700px]">
                {components.map((component) => (
                  <li key={`${component.href}-${component.title}`}>
                    <NavigationMenuLink href={component.href}>
                      <div className="flex flex-col gap-1.5">
                        <div className="leading-none font-medium">{component.title}</div>
                        <div className="text-muted-foreground line-clamp-2">
                          {component.description}
                        </div>
                      </div>
                    </NavigationMenuLink>
                  </li>
                ))}
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem value="status">
            <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul className="grid w-[240px]">
                <li>
                  <NavigationMenuLink href="#backlog" className="flex-row items-center gap-2">
                    <AlertCircle />Backlog
                  </NavigationMenuLink>
                  <NavigationMenuLink href="#to-do" className="flex-row items-center gap-2">
                    <CircleDashed />To Do
                  </NavigationMenuLink>
                  <NavigationMenuLink href="#done" className="flex-row items-center gap-2">
                    <CircleCheck />Done
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="/docs/" className={navigationMenuTriggerStyle()}>
              Docs
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/starwind/navigation-menu";
import { IconAlertCircle as AlertCircle } from "@tabler/icons-vue";
import { IconCircleCheck as CircleCheck } from "@tabler/icons-vue";
import { IconCircleDashed as CircleDashed } from "@tabler/icons-vue";

const components = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog/",
    description:
      "A modal dialog that interrupts the user with important content and expects a response.",
  },
  {
    title: "Hover Card",
    href: "/docs/components/hover-card/",
    description: "For sighted users to preview content available behind a link.",
  },
  {
    title: "Progress",
    href: "/docs/components/progress/",
    description: "Displays an indicator showing the completion progress of a task.",
  },
  {
    title: "Scroll Area",
    href: "/docs/components/scroll-area/",
    description: "Augments native scroll functionality for custom, cross-browser styling.",
  },
  {
    title: "Tabs",
    href: "/docs/components/tabs/",
    description: "A set of layered sections of content displayed one at a time.",
  },
  {
    title: "Tooltip",
    href: "/docs/components/tooltip/",
    description: "A popup that provides information when an element is focused or hovered.",
  },
];
</script>

<template>
  <NavigationMenu size="md" aria-label="Documentation navigation">
    <NavigationMenuList>
      <NavigationMenuItem value="getting-started">
        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="w-108">
            <li>
              <NavigationMenuLink href="/docs/getting-started/introduction/">
                <div class="flex flex-col gap-1.5">
                  <div class="leading-none font-medium">Introduction</div>
                  <div class="text-muted-foreground line-clamp-2">
                    Reusable components built with Tailwind CSS.
                  </div>
                </div>
              </NavigationMenuLink>
            </li>
            <li>
              <NavigationMenuLink href="/docs/getting-started/installation/">
                <div class="flex flex-col gap-1.5">
                  <div class="leading-none font-medium">Installation</div>
                  <div class="text-muted-foreground line-clamp-2">
                    How to install dependencies and structure your app.
                  </div>
                </div>
              </NavigationMenuLink>
            </li>
            <li>
              <NavigationMenuLink href="/docs/getting-started/theming/">
                <div class="flex flex-col gap-1.5">
                  <div class="leading-none font-medium">Theming</div>
                  <div class="text-muted-foreground line-clamp-2">
                    Customize colors, typography, and design tokens.
                  </div>
                </div>
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem value="components" class="hidden md:flex">
        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="grid w-[500px] gap-2 md:w-[600px] md:grid-cols-2 lg:w-[700px]">
            <template v-for="component in components" :key="component.href">
              <li>
                <NavigationMenuLink :href="component.href">
                  <div class="flex flex-col gap-1.5">
                    <div class="leading-none font-medium">{{ component.title }}</div>
                    <div class="text-muted-foreground line-clamp-2">
                      {{ component.description }}
                    </div>
                  </div>
                </NavigationMenuLink>
              </li>
            </template>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem value="status">
        <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
        <NavigationMenuContent>
          <ul class="grid w-[240px]">
            <li>
              <NavigationMenuLink href="#backlog" class="flex-row items-center gap-2">
                <AlertCircle />Backlog
              </NavigationMenuLink>
              <NavigationMenuLink href="#to-do" class="flex-row items-center gap-2">
                <CircleDashed />To Do
              </NavigationMenuLink>
              <NavigationMenuLink href="#done" class="flex-row items-center gap-2">
                <CircleCheck />Done
              </NavigationMenuLink>
            </li>
          </ul>
        </NavigationMenuContent>
      </NavigationMenuItem>
      <NavigationMenuItem>
        <NavigationMenuLink href="/docs/" :class="navigationMenuTriggerStyle()">
          Docs
        </NavigationMenuLink>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx starwind@latest add navigation-menu --framework astro
```
</DocsTabsContent>
```bash
npx starwind@latest add navigation-menu --framework react
```
</DocsTabsContent>
```bash
npx starwind@latest add navigation-menu --framework vue
```
</DocsTabsContent>
</DocsTabs>

## Usage

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
---
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/starwind/navigation-menu";
---
```
</div>
<div slot="react">
```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/starwind/navigation-menu";
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/starwind/navigation-menu";
</script>

<template></template>
```
</div>
</FrameworkCodeSwitcher>

<FrameworkCodeSwitcher>
<div slot="astro">
```astro
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem value="item-one">
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs/">Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```
</div>
<div slot="react">
```tsx
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/starwind/navigation-menu";

export function Example() {
  return (
    <>
      <NavigationMenu>
        <NavigationMenuList>
          <NavigationMenuItem value="item-one">
            <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
            <NavigationMenuContent>
              <NavigationMenuLink href="/docs/">Link</NavigationMenuLink>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </>
  );
}
```
</div>
<div slot="vue">
```vue
<script setup lang="ts">
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/starwind/navigation-menu";
</script>

<template>
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem value="item-one">
        <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink href="/docs/">Link</NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</template>
```
</div>
</FrameworkCodeSwitcher>

## Composition

Use the following composition to build a `NavigationMenu`:

```text
NavigationMenu
└── NavigationMenuList
    ├── NavigationMenuItem
    │   ├── NavigationMenuTrigger
    │   └── NavigationMenuContent
    │       ├── NavigationMenuLink
    │       └── NavigationMenuLink
    └── NavigationMenuItem
        └── NavigationMenuLink
```

## Sizes

`NavigationMenu` defaults to `size="md"`. Set `size` once to keep native triggers, List spacing,
trigger-style Links, and portaled content aligned. Use `contentSize` only when the shared popup
should intentionally use a different size.

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
import AlertCircle from "@tabler/icons/outline/alert-circle.svg";
import CircleCheck from "@tabler/icons/outline/circle-check.svg";
import CircleDashed from "@tabler/icons/outline/circle-dashed.svg";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/starwind/navigation-menu";

const componentLinks = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog/",
    description: "A modal dialog that asks for a response.",
  },
  {
    title: "Hover Card",
    href: "/docs/components/hover-card/",
    description: "Preview content available behind a link.",
  },
];
---

<div class="grid gap-6">
  <div class="space-y-3">
    <div class="text-muted-foreground text-sm font-medium">Small (sm)</div>
    <NavigationMenu size="sm" aria-label="Small documentation navigation">
      <NavigationMenuList>
        <NavigationMenuItem value="small-getting-started">
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="w-96">
              <li>
                <NavigationMenuLink href="/docs/getting-started/introduction/">
                  <div class="flex flex-col gap-1 text-sm">
                    <div class="leading-none font-medium">Introduction</div>
                    <div class="text-muted-foreground line-clamp-2">
                      Reusable components built with Tailwind CSS.
                    </div>
                  </div>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="small-components" class="hidden md:flex">
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
              {componentLinks.map((component) => (
                <li>
                  <NavigationMenuLink href={component.href}>
                    <div class="flex flex-col gap-1 text-sm">
                      <div class="leading-none font-medium">{component.title}</div>
                      <div class="text-muted-foreground line-clamp-2">
                        {component.description}
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="small-status">
          <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-[200px]">
              <li>
                <NavigationMenuLink href="#small-backlog" class="flex-row items-center gap-2">
                  <AlertCircle />Backlog
                </NavigationMenuLink>
                <NavigationMenuLink href="#small-to-do" class="flex-row items-center gap-2">
                  <CircleDashed />To Do
                </NavigationMenuLink>
                <NavigationMenuLink href="#small-done" class="flex-row items-center gap-2">
                  <CircleCheck />Done
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs/" class={navigationMenuTriggerStyle()}>
            Docs
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </div>

  <div class="space-y-3">
    <div class="text-muted-foreground text-sm font-medium">Medium (md)</div>
    <NavigationMenu size="md" aria-label="Medium documentation navigation">
      <NavigationMenuList>
        <NavigationMenuItem value="medium-getting-started">
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="w-108">
              <li>
                <NavigationMenuLink href="/docs/getting-started/introduction/">
                  <div class="flex flex-col gap-1.5">
                    <div class="leading-none font-medium">Introduction</div>
                    <div class="text-muted-foreground line-clamp-2">
                      Reusable components built with Tailwind CSS.
                    </div>
                  </div>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="medium-components" class="hidden md:flex">
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-[500px] gap-2 md:w-[600px] md:grid-cols-2 lg:w-[700px]">
              {componentLinks.map((component) => (
                <li>
                  <NavigationMenuLink href={component.href}>
                    <div class="flex flex-col gap-1.5">
                      <div class="leading-none font-medium">{component.title}</div>
                      <div class="text-muted-foreground line-clamp-2">
                        {component.description}
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              ))}
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem value="medium-status">
          <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul class="grid w-[240px]">
              <li>
                <NavigationMenuLink href="#medium-backlog" class="flex-row items-center gap-2">
                  <AlertCircle />Backlog
                </NavigationMenuLink>
                <NavigationMenuLink href="#medium-to-do" class="flex-row items-center gap-2">
                  <CircleDashed />To Do
                </NavigationMenuLink>
                <NavigationMenuLink href="#medium-done" class="flex-row items-center gap-2">
                  <CircleCheck />Done
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/docs/" class={navigationMenuTriggerStyle()}>
            Docs
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </div>
</div>
```
  </div>
  <div slot="react">
```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/starwind/navigation-menu";
import { IconAlertCircle, IconCircleCheck, IconCircleDashed } from "@tabler/icons-react";

const componentLinks = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog/",
    description: "A modal dialog that asks for a response.",
  },
  {
    title: "Hover Card",
    href: "/docs/components/hover-card/",
    description: "Preview content available behind a link.",
  },
];

export function Example() {
  return (
    <div className="grid gap-6">
      <div className="space-y-3">
        <div className="text-muted-foreground text-sm font-medium">Small (sm)</div>
        <NavigationMenu size="sm" aria-label="Small documentation navigation">
          <NavigationMenuList>
            <NavigationMenuItem value="small-getting-started">
              <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="w-96">
                  <li>
                    <NavigationMenuLink href="/docs/getting-started/introduction/">
                      <div className="flex flex-col gap-1 text-sm">
                        <div className="leading-none font-medium">Introduction</div>
                        <div className="text-muted-foreground line-clamp-2">
                          Reusable components built with Tailwind CSS.
                        </div>
                      </div>
                    </NavigationMenuLink>
                  </li>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem value="small-components" className="hidden md:flex">
              <NavigationMenuTrigger>Components</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                  {componentLinks.map((component) => (
                    <li key={component.href}>
                      <NavigationMenuLink href={component.href}>
                        <div className="flex flex-col gap-1 text-sm">
                          <div className="leading-none font-medium">{component.title}</div>
                          <div className="text-muted-foreground line-clamp-2">
                            {component.description}
                          </div>
                        </div>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem value="small-status">
              <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[200px]">
                  <li>
                    <NavigationMenuLink href="#small-backlog" className="flex-row items-center gap-2">
                      <IconAlertCircle />Backlog
                    </NavigationMenuLink>
                    <NavigationMenuLink href="#small-to-do" className="flex-row items-center gap-2">
                      <IconCircleDashed />To Do
                    </NavigationMenuLink>
                    <NavigationMenuLink href="#small-done" className="flex-row items-center gap-2">
                      <IconCircleCheck />Done
                    </NavigationMenuLink>
                  </li>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink href="/docs/" className={navigationMenuTriggerStyle()}>
                Docs
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>

      <div className="space-y-3">
        <div className="text-muted-foreground text-sm font-medium">Medium (md)</div>
        <NavigationMenu size="md" aria-label="Medium documentation navigation">
          <NavigationMenuList>
            <NavigationMenuItem value="medium-getting-started">
              <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="w-108">
                  <li>
                    <NavigationMenuLink href="/docs/getting-started/introduction/">
                      <div className="flex flex-col gap-1.5">
                        <div className="leading-none font-medium">Introduction</div>
                        <div className="text-muted-foreground line-clamp-2">
                          Reusable components built with Tailwind CSS.
                        </div>
                      </div>
                    </NavigationMenuLink>
                  </li>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem value="medium-components" className="hidden md:flex">
              <NavigationMenuTrigger>Components</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[500px] gap-2 md:w-[600px] md:grid-cols-2 lg:w-[700px]">
                  {componentLinks.map((component) => (
                    <li key={component.href}>
                      <NavigationMenuLink href={component.href}>
                        <div className="flex flex-col gap-1.5">
                          <div className="leading-none font-medium">{component.title}</div>
                          <div className="text-muted-foreground line-clamp-2">
                            {component.description}
                          </div>
                        </div>
                      </NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem value="medium-status">
              <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid w-[240px]">
                  <li>
                    <NavigationMenuLink href="#medium-backlog" className="flex-row items-center gap-2">
                      <IconAlertCircle />Backlog
                    </NavigationMenuLink>
                    <NavigationMenuLink href="#medium-to-do" className="flex-row items-center gap-2">
                      <IconCircleDashed />To Do
                    </NavigationMenuLink>
                    <NavigationMenuLink href="#medium-done" className="flex-row items-center gap-2">
                      <IconCircleCheck />Done
                    </NavigationMenuLink>
                  </li>
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
            <NavigationMenuItem>
              <NavigationMenuLink href="/docs/" className={navigationMenuTriggerStyle()}>
                Docs
              </NavigationMenuLink>
            </NavigationMenuItem>
          </NavigationMenuList>
        </NavigationMenu>
      </div>
    </div>
  );
}
```
  </div>
  <div slot="vue">
```vue
<script setup lang="ts">
import { IconAlertCircle as AlertCircle } from "@tabler/icons-vue";
import { IconCircleCheck as CircleCheck } from "@tabler/icons-vue";
import { IconCircleDashed as CircleDashed } from "@tabler/icons-vue";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/starwind/navigation-menu";

const componentLinks = [
  {
    title: "Alert Dialog",
    href: "/docs/components/alert-dialog/",
    description: "A modal dialog that asks for a response.",
  },
  {
    title: "Hover Card",
    href: "/docs/components/hover-card/",
    description: "Preview content available behind a link.",
  },
];
</script>

<template>
  <div class="grid gap-6">
    <div class="space-y-3">
      <div class="text-muted-foreground text-sm font-medium">Small (sm)</div>
      <NavigationMenu size="sm" aria-label="Small documentation navigation">
        <NavigationMenuList>
          <NavigationMenuItem value="small-getting-started">
            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul class="w-96">
                <li>
                  <NavigationMenuLink href="/docs/getting-started/introduction/">
                    <div class="flex flex-col gap-1 text-sm">
                      <div class="leading-none font-medium">Introduction</div>
                      <div class="text-muted-foreground line-clamp-2">
                        Reusable components built with Tailwind CSS.
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem value="small-components" class="hidden md:flex">
            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul class="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
                <template v-for="component in componentLinks" :key="component.href">
                  <li>
                    <NavigationMenuLink :href="component.href">
                      <div class="flex flex-col gap-1 text-sm">
                        <div class="leading-none font-medium">{{ component.title }}</div>
                        <div class="text-muted-foreground line-clamp-2">
                          {{ component.description }}
                        </div>
                      </div>
                    </NavigationMenuLink>
                  </li>
                </template>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem value="small-status">
            <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul class="grid w-[200px]">
                <li>
                  <NavigationMenuLink href="#small-backlog" class="flex-row items-center gap-2">
                    <AlertCircle />Backlog
                  </NavigationMenuLink>
                  <NavigationMenuLink href="#small-to-do" class="flex-row items-center gap-2">
                    <CircleDashed />To Do
                  </NavigationMenuLink>
                  <NavigationMenuLink href="#small-done" class="flex-row items-center gap-2">
                    <CircleCheck />Done
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="/docs/" :class="navigationMenuTriggerStyle()">
              Docs
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>

    <div class="space-y-3">
      <div class="text-muted-foreground text-sm font-medium">Medium (md)</div>
      <NavigationMenu size="md" aria-label="Medium documentation navigation">
        <NavigationMenuList>
          <NavigationMenuItem value="medium-getting-started">
            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul class="w-108">
                <li>
                  <NavigationMenuLink href="/docs/getting-started/introduction/">
                    <div class="flex flex-col gap-1.5">
                      <div class="leading-none font-medium">Introduction</div>
                      <div class="text-muted-foreground line-clamp-2">
                        Reusable components built with Tailwind CSS.
                      </div>
                    </div>
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem value="medium-components" class="hidden md:flex">
            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul class="grid w-[500px] gap-2 md:w-[600px] md:grid-cols-2 lg:w-[700px]">
                <template v-for="component in componentLinks" :key="component.href">
                  <li>
                    <NavigationMenuLink :href="component.href">
                      <div class="flex flex-col gap-1.5">
                        <div class="leading-none font-medium">{{ component.title }}</div>
                        <div class="text-muted-foreground line-clamp-2">
                          {{ component.description }}
                        </div>
                      </div>
                    </NavigationMenuLink>
                  </li>
                </template>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem value="medium-status">
            <NavigationMenuTrigger>With icon</NavigationMenuTrigger>
            <NavigationMenuContent>
              <ul class="grid w-[240px]">
                <li>
                  <NavigationMenuLink href="#medium-backlog" class="flex-row items-center gap-2">
                    <AlertCircle />Backlog
                  </NavigationMenuLink>
                  <NavigationMenuLink href="#medium-to-do" class="flex-row items-center gap-2">
                    <CircleDashed />To Do
                  </NavigationMenuLink>
                  <NavigationMenuLink href="#medium-done" class="flex-row items-center gap-2">
                    <CircleCheck />Done
                  </NavigationMenuLink>
                </li>
              </ul>
            </NavigationMenuContent>
          </NavigationMenuItem>
          <NavigationMenuItem>
            <NavigationMenuLink href="/docs/" :class="navigationMenuTriggerStyle()">
              Docs
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  </div>
</template>
```
  </div>
</FrameworkCodeSwitcher>

## Custom triggers

Native `NavigationMenuTrigger` elements merge ordinary `class` customization through their full
recipe. With `asChild`, the child instead owns its complete appearance and markup; Navigation Menu
adds behavior, accessibility/state attributes, and the Trigger's consumer-provided class.

## API Reference
### NavigationMenu
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `align` | `"start" \| "center" \| "end"` | No | `"start"` | Wrapper prop | Aligns the component within its available axis. |
| `alignOffset` | `number` | No | `0` | Wrapper prop | Offsets the component from its selected alignment in pixels. |
| `avoidCollisions` | `boolean` | No | `true` | Wrapper prop | Repositions floating content to keep it inside the collision boundary. |
| `collisionPadding` | `number` | No | `8` | Wrapper prop | Sets the minimum space retained around a collision boundary. |
| `contentSize` | `"sm" \| "md"` | No | `size` | Wrapper prop | Sets the independently portaled popup content size and defaults to the resolved Navigation Menu size. |
| `disablePortal` | `boolean` | No | `false` | Wrapper prop | Keeps the public Portal wrapper inline instead of moving it to a target. |
| `portalContainer` | `string` | No | - | Wrapper prop | Sets the CSS selector for the public Portal wrapper target. |
| `side` | `"top" \| "right" \| "bottom" \| "left"` | No | `"bottom"` | Wrapper prop | Selects the preferred side for floating content. |
| `sideOffset` | `number` | No | `8` | Wrapper prop | Sets the distance in pixels between floating content and its anchor. |
| `size` | `"sm" \| "md"` | No | `"md"` | Wrapper prop | Sets the visual size of native styled triggers, List spacing, indicators, and top-level Links using navigationMenuTriggerStyle(). |
- Inherits nav attributes. Omits `defaultValue`, `onChange`, and `value`.

### NavigationMenuList
- Inherits ul attributes.

### NavigationMenuItem
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `value` | `string` | No | - | Wrapper prop | Controls or identifies the component value. |
- Inherits li attributes.

### NavigationMenuTrigger
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Primitive override | Delegates markup and complete visual ownership to the child while retaining Navigation Menu behavior and accessibility wiring. |
| `closeDelay` | `number` | No | - | Primitive override | Sets the delay in milliseconds before closing. |
| `iconClass` | `string` | No | - | Wrapper prop | Adds classes to the component's generated icon. |
| `openDelay` | `number` | No | - | Primitive override | Sets the delay in milliseconds before opening. |
| `showIcon` | `boolean` | No | `true` | Wrapper prop | Shows the component's generated icon. |
- Inherits button attributes.

### NavigationMenuIndicator
- Inherits span attributes.

### NavigationMenuContent
- Inherits div attributes.

### NavigationMenuLink
- Inherits a attributes.

### NavigationMenuPositioner
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `disablePortal` | `boolean` | No | `false` | Wrapper prop | Keeps the public Portal wrapper inline instead of moving it to a target. |
| `portalContainer` | `string` | No | - | Wrapper prop | Sets the CSS selector for the public Portal wrapper target. |
| `sideOffset` | `number` | No | `8` | Primitive override | Sets the distance in pixels between floating content and its anchor. |
| `size` | `"sm" \| "md"` | No | `"md"` | Wrapper prop | Sets the popup content size when rendering NavigationMenuPositioner directly. |
- Inherits div attributes.
### Primitive And Runtime API
Behavior, state, events, form participation, and imperative methods are documented in the lower-level references.
- Primitive: [Navigation Menu Primitive](/docs/primitives/navigation-menu/)
- Runtime factory: [`createNavigationMenu`](/docs/runtime/#create-navigation-menu) from `@starwind-ui/runtime/navigation-menu`

## Changelog

### v1.2.0

- Added `portalContainer` and `disablePortal` to `NavigationMenu` and
`NavigationMenuPositioner` for custom portal targets and inline rendering.

### v1.1.1

- Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

### v1.1.0

- Added root `sm` and `md` sizing plus independent `contentSize` control for the shared
portaled popup. Omitted `contentSize` follows the resolved root `size`.
- Corrected styled `NavigationMenuTrigger asChild` ownership: the composed child now keeps its own
complete appearance and markup. Style and size the child directly, and add any desired icon
inside it; Navigation Menu still supplies behavior and accessibility wiring.

### v1.0.0

- Added the Runtime-backed Navigation Menu with keyboard navigation and shared viewport behavior.
- See the [Navigation Menu Primitive](/docs/primitives/navigation-menu/) for the underlying unstyled anatomy and behavior API.