Q: How do I render Next.js Link inside the navigation menu items?

Use ` ` and pass ` ` as the child. asChild forwards the menu's styling and ARIA wiring to the Link. Don't nest ` ` inside the menu's default NavigationMenuLink — that creates duplicate anchor elements and breaks routing.

Question 1

What is a shadcn navigation menu?

Accepted Answer

A shadcn navigation menu is the marketing-site top nav with hover/click-revealed dropdown panels — the "Product / Solutions / Resources / Pricing" pattern with rich content panels per section. It's built on Radix UI's NavigationMenu primitive (collision-aware positioning, keyboard nav, focus management, ARIA semantics) wrapped in shadcn/ui's NavigationMenu styling.

Question 2

Are these navigation menu examples free?

Accepted Answer

Yes, every navigation menu example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Navigation Menu vs Menubar vs Dropdown Menu — which one?

Accepted Answer

NavigationMenu for marketing site headers — top-level sections, optional rich panels per section (mega menus), works on hover and click. Menubar for desktop-app menu bars (File/Edit/View) — auto-cascade between adjacent menus. DropdownMenu for single buttons that open a flat list of actions (kebab menus, profile menus). Pick by context: marketing nav, app shell, or single button.

Question 4

When should I use a mega menu (rich panel) versus a simple list?

Accepted Answer

Mega menu for sites with 8+ sub-pages per category — Stripe, AWS, Vercel docs use mega menus to show product taxonomy without making users dig. Simple list for sites with 2-4 items per category — a mega menu would be over-engineered and waste real estate. Hybrid: simple list for short categories, mega menus for the categories that genuinely need taxonomy.

Question 5

How do I build a mega menu with featured content?

Accepted Answer

Use the marketing variant. Inside each NavigationMenuContent, render a multi-column grid: column 1 has a featured card (large illustration + title + CTA), columns 2-3 have categorized link lists. Common pattern for product / solution sections where the featured card surfaces the top use case while the lists give power users direct access.

Question 6

How do I make the menu responsive (collapses to mobile menu)?

Accepted Answer

NavigationMenu is desktop-first. On mobile, render a Sheet (right-side or full-screen drawer) with a hamburger button trigger that contains the same nav structure. Hide the desktop NavigationMenu via `hidden md:flex` and show the mobile Sheet via `md:hidden`. Pattern: every modern marketing site does this; the desktop NavigationMenu and the mobile Sheet share the same nav data structure.

Question 7

How do I highlight the active page in the nav?

Accepted Answer

Add a `data-active="true"` attribute to the NavigationMenuItem matching the current pathname. Style via `data-[active=true]:text-foreground data-[active=true]:font-semibold`. Compute active state via `usePathname()` (App Router) — for nested sections, match by prefix (`pathname.startsWith('/docs')` highlights the Docs section even on `/docs/getting-started`).

Question 8

How do I install a navigation menu example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/navigation-menu/…`, plus the shadcn/ui NavigationMenu primitive (and its Radix dependency) if you don't already have it.

Question 9

How do I make the navigation menu open on hover instead of click?

Accepted Answer

Radix NavigationMenu opens on hover by default with a small open-delay. Configure via `delayDuration={200}` and `skipDelayDuration={300}`. To disable hover entirely (click-only), set `delayDuration={0}` and use a CSS `pointer-events-none` on the trigger when not focused. Most marketing sites stick with the hover default; click-only is rare.

Question 10

How do I render Next.js Link inside the navigation menu items?

Accepted Answer

Use `` and pass `` as the child. asChild forwards the menu's styling and ARIA wiring to the Link. Don't nest `` inside the menu's default NavigationMenuLink — that creates duplicate anchor elements and breaks routing.

Question 11

Which libraries do navigation menu examples depend on?

Accepted Answer

Radix UI NavigationMenu (the primitive — collision-aware positioning, focus management, keyboard nav, hover delays), shadcn/ui NavigationMenu (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (icons inside menu items / featured cards). For mobile fallback, shadcn/ui Sheet. React 19 baseline.

Question 12

Are navigation menu examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Radix wires the WAI-ARIA Disclosure pattern: Tab focuses each top-level item, ArrowDown opens the focused item's panel, Tab inside the panel cycles through links, Esc closes and returns focus to the trigger. Hover users mouse around; keyboard users get the same access via arrows. Screen readers announce the menu role and each item's expanded state.

Question 13

Can I use these navigation menu examples with React Server Components?

Accepted Answer

The NavigationMenu is a client component (it manages open/active state). Wrap it inside a Server Component layout — typical pattern: a server-rendered `<header>` containing the client-boundary NavigationMenu. The menu structure (link list) can be defined statically in the server component and passed as props to keep the client bundle small.

React Navigation Menu Examples for shadcn/ui

Browse every navigation menu example

Frequently Asked Questions