Navigation Menu
A composable site navigation menu with rich mega-menu content panels.
Overview
Navigation Menu is for site and product navigation with optional disclosure panels. Prefer it for marketing/docs headers and dashboard top bars. Prefer Dropdown Menu for action menus, and Sidebar or Sheet for mobile primary navigation.
NavigationMenuContent is intentionally a composition surface. It is not restricted to navigation links and can contain arbitrary React content and other Vinyaas components.
Preview
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add navigation-menuUsage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
} from "@/components/ui/navigation-menu";
export function SiteNav() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem value="products">
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid gap-3 md:grid-cols-2">
<NavigationMenuLink href="/products/analytics">
Analytics
</NavigationMenuLink>
<NavigationMenuLink href="/products/workspace">
Workspace
</NavigationMenuLink>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
<NavigationMenuViewport />
</NavigationMenu>
);
}Examples
Simple navigation
Top-level links without panels.
Product mega menu
Compose Card, Badge, Button, and links inside NavigationMenuContent.
Rich workspace menu
Recent projects, status badges, avatar activity, and a create action.
Dashboard navigation
Dashboard links with a Projects panel for browse filters and recent cards.
Documentation navigation
Grouped component links across Inputs, Navigation, and Feedback.
In practice
A product header mixes a Product mega panel with top-level Docs, Pricing, and Blog links.
Vinyaas
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
value | string | null | — | Controlled open item value on NavigationMenu. |
defaultValue | string | null | — | Initial open item when uncontrolled. |
onValueChange | (value: string | null) => void | — | Called when the open item changes. |
value | string | — | Stable item id on NavigationMenuItem (recommended for triggers). |
className | string | — | Merged onto the part with cn. |
Accessibility
- Root is a
nav. Triggers exposearia-expandedandaria-controls. - Content panels use
role="region"so nested cards, buttons, and links keep their native semantics. - ArrowLeft/Right, Home, and End move across triggers. Enter/Space toggles a panel. Escape closes. Tab is not trapped.
- On narrow viewports, prefer Sidebar or Sheet for primary mobile navigation and keep Navigation Menu for denser desktop layouts.