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 Icons
A navigation menu dropdown with icon-labeled items for Components, Performance, Security, and Accessibility using Lucide React icons
Simple Navigation
A basic navigation menu with dropdown triggers for Products and Solutions plus a direct Pricing link using shadcn/ui NavigationMenu