React navigation menu component for website navigation with dropdowns and mega menus. Built with TypeScript and Tailwind CSS for Next.js using Radix UI.
Ever built a website where users couldn't find anything because your navigation was a mess? Or tried to cram dozens of links into a tiny dropdown that nobody wanted to use? Yeah, that's exactly when you need a proper navigation menu. This shadcn/ui navigation menu brings that smooth, professional navigation experience to your React applications.
Complete navigation with organized content sections:
Loading component...
"use client"import Link from "next/link"import * as React from "react"import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle,} from "~/components/ui/navigation-menu"const components: { title: string; href: string; description: string }[] = [ { title: "Alert Dialog", href: "#", description: "A modal dialog that interrupts the user with important content and expects a response.", }, { title: "Hover Card", href: "#", description: "For sighted users to preview content available behind a link.", }, { title: "Progress", href: "#", description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.", }, { title: "Scroll-area", href: "#", description: "Visually or semantically separates content.", }, { title: "Tabs", href: "#", description: "A set of layered sections of content—known as tab panels—that are displayed one at a time.", }, { title: "Tooltip", href: "#", description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.", },]export default function NavigationMenuDemo() { return ( <div className="flex justify-center self-start pt-6 w-full" style={{ all: "revert", display: "flex", justifyContent: "center", alignSelf: "flex-start", paddingTop: "1.5rem", width: "100%", fontSize: "14px", lineHeight: "1.5", letterSpacing: "normal", }} > <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Getting started</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr] list-none"> <li className="row-span-3"> <NavigationMenuLink asChild> <a className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md" href="#" onClick={e => e.preventDefault()} > <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div> <p className="text-sm leading-tight text-muted-foreground"> Beautifully designed components built with Radix UI and Tailwind CSS. </p> </a> </NavigationMenuLink> </li> <ListItem href="#" title="Introduction"> Re-usable components built using Radix UI and Tailwind CSS. </ListItem> <ListItem href="#" title="Installation"> How to install dependencies and structure your app. </ListItem> <ListItem href="#" title="Typography"> Styles for headings, paragraphs, lists...etc </ListItem> </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuTrigger>Components</NavigationMenuTrigger> <NavigationMenuContent> <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] list-none"> {components.map(component => ( <ListItem href={component.href} key={component.title} title={component.title}> {component.description} </ListItem> ))} </ul> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink asChild> <Link className={navigationMenuTriggerStyle()} href="#" onClick={e => e.preventDefault()} > Documentation </Link> </NavigationMenuLink> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> </div> )}const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>( ({ className, title, children, ...props }, ref) => { return ( <li> <NavigationMenuLink asChild> <a className="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground" onClick={e => e.preventDefault()} ref={ref} {...props} > <div className="text-sm font-medium leading-none">{title}</div> <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p> </a> </NavigationMenuLink> </li> ) },)ListItem.displayName = "ListItem"
Built on Radix UI NavigationMenu primitives with full keyboard navigation, hover delays, and all the accessibility features users expect from modern website navigation. Styled with Tailwind CSS so it matches your design system instead of looking like a generic system menu.
Here's the thing—regular dropdowns are fine for simple stuff, but modern websites need navigation that helps users discover content instead of hiding it. Think about how Stripe organizes their product pages, or how GitHub structures their documentation. You hover over a section and get organized previews of what's available.
Users expect navigation to be more than just a list of links. They want visual hierarchy, helpful descriptions, and logical grouping. A well-designed navigation menu reduces cognitive load and helps people find what they're looking for faster. That's the difference between navigation that works and navigation that gets in the way.
This free shadcn navigation menu handles the complex parts—hover timing, keyboard navigation, focus management, accessibility—while you focus on organizing your content. Whether you're building marketing sites, documentation, or SaaS applications in your Next.js projects, navigation that guides users keeps them engaged in your JavaScript applications.
Organize content logically with visual hierarchy. This free shadcn/ui navigation menu supports rich content—use it wisely. Group related links together, add helpful descriptions, and highlight important sections. This TypeScript component provides the structure—you provide the organization that matches user mental models in your Next.js applications.
Time hover interactions carefully. The component includes smart hover delays to prevent accidental triggers, but test with real users. This open source shadcn navigation adapts to different interaction patterns—find timing that feels natural for your audience.
Design for mobile from the start. Navigation menus work on touch devices, but consider alternative patterns like Sheet or Drawer components for mobile-first experiences. This JavaScript component is responsive, but mobile users often prefer different navigation patterns.
Keep content scannable and actionable. Don't overwhelm users with too many options in dropdown content. This Tailwind CSS styled component supports complex layouts, but restraint creates better user experiences. Focus on helping users find what they need quickly.
Test keyboard navigation thoroughly. The component handles focus management automatically, but test the complete flow with real keyboard users. Screen readers need logical content organization and clear labels to announce navigation structure properly.
Navigation menus naturally work with Button components for consistent styling and Sheet components for mobile navigation in your React applications. Use Separator components to organize complex dropdown content visually.
For marketing sites, combine navigation with Card components for featured content sections or Badge components to highlight new features or popular pages. This open source pattern creates cohesive website experiences.
When building documentation sites, pair navigation menus with Breadcrumb components for hierarchical navigation or ScrollArea components for long content lists. The navigation provides top-level structure—other shadcn components handle specific content areas.
For dynamic content, use navigation menus with Avatar components for user account sections or DropdownMenu components for user actions. Your JavaScript application can compose these components while maintaining consistent navigation patterns.