Shadcn.io is not affiliated with official shadcn/ui
Navigation without Viewport
A navigation menu using viewport equals false prop to disable the viewport wrapper for alternative positioning and animation behavior
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.
Navigation without Viewport preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Navigation with Descriptions
A navigation menu with icon-labeled items plus descriptive text for Documentation, Guides, and Video Courses at 320px width
Mixed Links and Dropdowns
A navigation menu combining dropdowns and direct links using navigationMenuTriggerStyle for consistent styling across interaction types