---
title: Navigation Menu
description: Render accessible navigation links and flyout content
type: reference
summary: Compose NavigationMenu primitives for custom product and documentation navigation.
url: /docs/components/navigation-menu
source: apps/template/content/docs/components/navigation-menu.mdx
related:
  - /docs/components
  - /docs/components/dropdown-menu
---

# Navigation Menu

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@vercel/geistdocs/components/navigation-menu";

<div className="not-prose my-6 flex min-h-40 items-start justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <NavigationMenu>
    <NavigationMenuList>
      <NavigationMenuItem>
        <NavigationMenuTrigger>Guides</NavigationMenuTrigger>
        <NavigationMenuContent>
          <NavigationMenuLink className="block w-56 p-3" href="/docs/getting-started">
            Getting started
          </NavigationMenuLink>
        </NavigationMenuContent>
      </NavigationMenuItem>
    </NavigationMenuList>
  </NavigationMenu>
</div>

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@vercel/geistdocs/components/navigation-menu";
```

The subpath also exports `NavigationMenuIndicator`, `NavigationMenuViewport`, and `navigationMenuTriggerStyle`.