Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Navigation Menu - Mixed Links and Dropdowns
A navigation menu combining dropdowns and direct links using navigationMenuTriggerStyle for consistent styling across interaction types
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
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
React Pagination - Start Ellipsis
Pagination with start ellipsis showing page 1 then skipping to near-end pages for large datasets built with shadcn/ui