Navigation Menu
A collection of links for navigating websites.
Installation
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/navigation-menu.jsonUsage
Use for site chrome with top-level links and optional flyout content. Built on Base UI Navigation Menu.
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@/components/navigation-menu/navigation-menu";
export function Example() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid w-48 gap-1 p-1">
<li>
<NavigationMenuLink href="/docs">
Introduction
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink href="/docs/installation">
Installation
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}Reuse navigationMenuTriggerStyle() for link items that should match trigger chrome.