Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Navigation Menu examples · Marketing

Product Showcase with CTA Navigation Menu for React

A Products dropdown with three described products beside a Get Started panel with two call-to-action buttons.

Framework
UI library

Products opens three products with icons and descriptions on the left, and a muted Get Started panel on the right with Start Free Trial and View Pricing. The menu sends people to a product or straight to sign-up.

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 is the panel split?

A two-column grid, grid-cols-[2fr_1fr]: the product links take two thirds, the call-to-action panel one third.

Do the buttons go anywhere?

Not in the demo: they are Buttons with no handler. Make them links to your sign-up and pricing pages, the way each library composes a button with a link.

What happens on narrow screens?

The panel is w-[600px] with max-w-full, so it never grows past the screen, but its columns get tight. Below the md breakpoint, show the same links in a Sheet or a Drawer instead.

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