Chapter 22: Navigation Menu

Core Idea

A collection of links for site navigation with a flexible layout, managed tab focus, optional submenus, and an animatable active-item indicator/viewport — distinct from Menubar in intent (site navigation vs. app commands) and in exposing a shared Viewport for cross-item content animation.

Key Concepts

• Anatomy: Root → List → Item (→ Trigger + Content → Link, or a bare Link) → Indicator; Root → Viewport (renders open Content in a shared, positioned container).
• Sub: used in place of Root for a nested submenu inside a Content (its own List/Viewport).
• delayDuration/skipDelayDuration: hover-intent timing — skipDelayDuration shortens the delay when quickly moving between already-open triggers.
• Viewport: a single shared container that content animates into/out of — enables smooth cross-fade/resize transitions between different open menu contents instead of each Content animating independently.
• Differs from Menubar: Navigation Menu is for hierarchical site navigation with a shared animated viewport; Menubar is for flat, app-style command menus without a shared viewport.

Key Takeaways

1. Use Viewport (not just Content styling) to get the smooth "morphing" size/position transition between different open menu panels seen in typical mega-menus.
2. For client-side routing, render Link's asChild around your router's link component (e.g. Next.js Link) the same way as any other Radix trigger/link composition.
3. If you don't need submenus or an animated shared viewport and just want a flat command bar, Menubar is the simpler-fitting primitive — see its "Differences to menubar" note in the source docs.

Connects To

• Menubar: the flat, app-command-oriented sibling primitive — see its own chapter for when to prefer it.
• Animation: the CSS-variable-driven, origin/collision-aware animation techniques apply to Content and Viewport here too.