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-menu

Usage

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.

NameTypeDefaultDescription
valuestring | null—Controlled open item value on NavigationMenu.
defaultValuestring | null—Initial open item when uncontrolled.
onValueChange(value: string | null) => void—Called when the open item changes.
valuestring—Stable item id on NavigationMenuItem (recommended for triggers).
classNamestring—Merged onto the part with cn.

Accessibility

  • Root is a nav. Triggers expose aria-expanded and aria-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.