Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Navigation Menu - Navigation without Viewport
A navigation menu using viewport equals false prop to disable the viewport wrapper for alternative positioning and animation behavior
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Most navigation uses the default viewport wrapper—but sometimes you need direct control. This React navigation menu uses viewport equals false on NavigationMenu to disable Radix UI's positioning wrapper, giving you manual control over dropdown placement and animations. Built with shadcn/ui NavigationMenu and Radix UI, Products and Company dropdowns render without the viewport layer—perfect for custom animations, absolute positioning contexts, complex layouts, or any navigation where default viewport behavior conflicts with your design system.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Simple Navigation
Standard navigation with viewport
Mixed Links and Dropdowns
Combined navigation types
Dropdown Menu
Alternative dropdown approach
Full Mega Menu
Large navigation layout
Popover
Floating popover component
Navigation with Icons
Icon-enhanced navigation
Questions you might have
React Navigation Menu - Navigation with Descriptions
A navigation menu with icon-labeled items plus descriptive text for Documentation, Guides, and Video Courses at 320px width
React Navigation Menu - Mixed Links and Dropdowns
A navigation menu combining dropdowns and direct links using navigationMenuTriggerStyle for consistent styling across interaction types