Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Navigation Menu examples · Standard

Mixed Links and Dropdowns Navigation Menu for React

A navigation menu that mixes Products and Support dropdowns with plain Pricing and About links.

Framework
UI library

Products and Support open lists of links; Pricing and About in between go straight to their pages. Most site headers look like this: a few sections with sub-pages, and a few single pages.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do plain links match the triggers?

Pricing and About take navigationMenuTriggerStyle() as their class, the same height, padding and hover as the triggers, so the row reads as one menu.

What is in each dropdown?

A w-48 column of NavigationMenuLinks: Analytics, Marketing and Commerce under Products; Help Center, Contact Us and Status under Support.

Can links and dropdowns go in any order?

Yes. Each is its own NavigationMenuItem, and the list keeps the order you write them in.

How do the links use my router?

Each link is your router's link rendered through NavigationMenuLink, so it keeps the menu's styles and focus handling. NavigationMenuLink takes the Next.js Link through render, as in render={<Link href="#" />}.

How does the menu work from the keyboard?

Tab moves between the triggers and the links, Enter or Space opens a trigger's panel, and Escape closes it and returns focus to the trigger. The root is a nav, so screen readers list it as a navigation landmark.

How do I mark the current page?

Set aria-current="page" on the NavigationMenuLink that matches the route, and style it with the aria-[current=page]: variant. active on NavigationMenuLink sets it for you.

All 20 navigation menu examples