---
title: Navigation Menu
description: A collection of links for navigating websites.

link:
  doc: https://kobalte.dev/docs/core/components/navigation-menu
  api: https://kobalte.dev/docs/core/components/navigation-menu#api-reference
---

<ComponentPreview name="navigation-menu-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/navigation-menu-demo.tsx

```

</ComponentPreview>

## Installation

<ComponentInstallation>

<Step>

<StepItem>Copy and paste the following code into your project:</StepItem>

  <ComponentSourceTabs>

    ```tsx title="components/ui/navigation-menu" file=<rootDir>/apps/docs/src/registry/ui/navigation-menu.tsx

    ```

    ```tsx title="components/ui/navigation-menu" file=<rootDir>/apps/unocss-playground/src/registry/ui/navigation-menu.tsx

    ```

  </ComponentSourceTabs>

</Step>

</ComponentInstallation>

## Usage

```tsx
import {
  NavigationItemDescription,
  NavigationItemLabel,
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuList,
  NavigationMenuPortal,
  NavigationMenuTrigger,
} from "@components/ui/navigation-menu"
```

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuTrigger />
    <NavigationMenuPortal>
      <NavigationMenuContent>
        <NavigationMenuItem>
          <NavigationItemLabel />
          <NavigationItemDescription />
        </NavigationMenuItem>
      </NavigationMenuContent>
    </NavigationMenuPortal>
  </NavigationMenuList>
</NavigationMenu>
```

## Examples

### Orientation

<ComponentPreview name="navigation-menu-vertical-demo">

```tsx file=<rootDir>/apps/docs/src/registry/examples/navigation-menu-vertical-demo.tsx

```

</ComponentPreview>
