Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Navigation without Viewport
Next: Start Ellipsis

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.

Scroll to load preview

Installation

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.

Navigation without Viewport

A navigation menu using viewport equals false prop to disable the viewport wrapper for alternative positioning and animation behavior

Start Ellipsis

Pagination with start ellipsis showing page 1 then skipping to near-end pages for large datasets built with shadcn/ui