║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Navigation Menu description: A collection of links for navigating websites. links: docs: https://base-ui.com/react/components/navigation-menu api: https://base-ui.com/react/components/navigation-menu#api-reference

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

Installation

<CodeBlockCommand component="navigation-menu" />

---

Examples

With Arrow

<ComponentPreview name="navigation-menu-with-arrow" />

Migrating from Radix UI

<Steps> <Step> <include>migration-steps/common.mdx</include> </Step> <Step> ### Remove the `viewport` prop

**Before:**
```tsx
import { NavigationMenu } from "@/components/ui/navigation-menu";

<NavigationMenu viewport={false} />
```

**After:**
```tsx
import { NavigationMenu } from "@/components/ui/navigation-menu";

<NavigationMenu />
```

</Step> <Step> ### Add Positioner and Popup components

**Before:**
```tsx
import {
  NavigationMenu,
  NavigationMenuList,
} from "@/components/ui/navigation-menu";

<NavigationMenu>
  <NavigationMenuList>...</NavigationMenuList>
</NavigationMenu>
```

**After:**
```tsx
import {
  NavigationMenu,
  NavigationMenuPositioner,
  NavigationMenuPopup,
} from "@/components/ui/navigation-menu";

<NavigationMenu>
  <NavigationMenuList>...</NavigationMenuList>
  // [!code ++:3]
  <NavigationMenuPositioner>
    <NavigationMenuPopup />
  </NavigationMenuPositioner>
</NavigationMenu>
```

</Step> <Step> ### Add Arrow for Popup (optional)

If you want to add an arrow to the popup, you can add the `NavigationMenuArrow` component inside the `NavigationMenuPopup` component.

```tsx
import {
  NavigationMenu,
  NavigationMenuPositioner,
  NavigationMenuPopup,
} from "@/components/ui/navigation-menu";

<NavigationMenu>
  <NavigationMenuList>...</NavigationMenuList>
  <NavigationMenuPositioner>
    // [!code --]
    <NavigationMenuPopup />
    // [!code ++:3]
    <NavigationMenuPopup>
      <NavigationMenuArrow />
    </NavigationMenuPopup>
  </NavigationMenuPositioner>
</NavigationMenu>
```

</Step> </Steps>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║