Docs
Navigation Menu
Navigation Menu
A collection of links for navigating websites.
Installation
pnpm dlx shadcn@latest add navigation-menu
Usage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuIndicator,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Item One</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink>Link</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
Examples
Link Component
When using the Next.js <Link />
component, you can use navigationMenuTriggerStyle()
to apply the correct styles to the trigger.
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"
<NavigationMenuItem>
<Link href="/docs" legacyBehavior passHref>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Documentation
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
See also the Radix UI documentation for handling client side routing.