basecn
Components

Navigation Menu

A collection of links for navigating websites.

Docs API Reference

Installation

pnpm dlx shadcn@latest add https://basecn.dev/r/navigation-menu.json

Examples

With Arrow

Migrating from Radix UI

Common Migration Steps

All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.

Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.

Remove the viewport prop

Before:

import { NavigationMenu } from "@/components/ui/navigation-menu";

<NavigationMenu viewport={false} />

After:

import { NavigationMenu } from "@/components/ui/navigation-menu";

<NavigationMenu />

Add Positioner and Popup components

Before:

import {
  NavigationMenu,
  NavigationMenuList,
} from "@/components/ui/navigation-menu";

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

After:

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

<NavigationMenu>
  <NavigationMenuList>...</NavigationMenuList>
  <NavigationMenuPositioner>
    <NavigationMenuPopup />
  </NavigationMenuPositioner>
</NavigationMenu>

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.

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

<NavigationMenu>
  <NavigationMenuList>...</NavigationMenuList>
  <NavigationMenuPositioner>
    <NavigationMenuPopup />
    <NavigationMenuPopup>
      <NavigationMenuArrow />
    </NavigationMenuPopup>
  </NavigationMenuPositioner>
</NavigationMenu>
Docs by Fumadocs
Analytics by Databuddy