Shadcn.io is not affiliated with official shadcn/ui
Mixed Links and Dropdowns
A navigation menu combining dropdowns and direct links using navigationMenuTriggerStyle for consistent styling across interaction types
Real navigation mixes dropdowns and direct links—not everything needs a dropdown. This React navigation menu alternates: Products dropdown, Pricing direct link, About direct link, Support dropdown using navigationMenuTriggerStyle() to style direct links consistently with dropdown triggers. Built with shadcn/ui NavigationMenu and Radix UI, the utility function ensures visual cohesion—perfect for realistic navigation, varied content architecture, flexible information hierarchies, or any menu where some items expand and others navigate directly.
Mixed Links and Dropdowns preview
Installation
Related Components
Simple Navigation
Basic mixed navigation
Navigation with Icons
Icon-enhanced dropdowns
Full Mega Menu
Complex navigation layout
Button Group
Mixed button types
Navigation with Descriptions
Dropdown with descriptions
Dropdown Menu
Standard dropdown component
FAQ
Was this page helpful?
Sign in to leave feedback.
Resources with Lead Magnets
Marketing NavigationMenu with resource links and lead magnet CTAs for platform guide downloads and webinar registration built with shadcn/ui
Navigation with Descriptions
A navigation menu with icon-labeled items plus descriptive text for Documentation, Guides, and Video Courses at 320px width