Navigation Menu
A top-level app menu with hoverable triggers that open a positioned dropdown panel.
Install
pnpm dlx shadcn@latest add @namche/navigation-menuUsage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Platform</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href="/platform/models">Models</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>Built on Base UI's NavigationMenu — the Root renders its own
Positioner/Portal/Viewport internally, so a NavigationMenuItem only
needs a NavigationMenuTrigger paired with NavigationMenuContent when it
opens a panel; an item that links straight to a page skips the trigger and
uses NavigationMenuLink directly. align on the root controls where the
dropdown panel lines up against its trigger, defaulting to start.