Primitive · CLI
Navigation Menu
Site nav panels with peer crossfade and soft-rect Mira popup.
Preview
npx shadcn@latest add @atroui/navigation-menuInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/navigation-menuSource lands in your repo. Installation · Registry
Usage
Peer panels crossfade inside one soft-rect popup. Prefer for top-level site sections — not deep hierarchies.
tsx
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Product</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="#">Overview</NavigationMenuLink>
<NavigationMenuLink href="#">Pricing</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Docs</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="#">Guides</NavigationMenuLink>
<NavigationMenuLink href="#">API</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
<NavigationMenuViewport />
</NavigationMenu>Navigation Menu