Navigation Menu

A collection of links for navigating websites and React applications. Built with Radix UI NavigationMenu for keyboard navigation and screen reader accessibility.

You know those smooth navigation menus on modern websites? The ones where you hover and get those nice dropdown panels with organized links? That's what navigation menus do - they give you that polished, professional nav experience.

Full-featured navigation with organized content sections:

Loading component...

"use client"import * as React from "react"import Link from "next/link"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                    key={component.title}                    title={component.title}                    href={component.href}                  >                    {component.description}                  </ListItem>                ))}              </ul>            </NavigationMenuContent>          </NavigationMenuItem>          <NavigationMenuItem>            <NavigationMenuLink asChild>              <Link href="#" className={navigationMenuTriggerStyle()} 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          ref={ref}          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()}          {...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"

import * as React from "react"import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"import { cva } from "class-variance-authority"import { ChevronDownIcon } from "lucide-react"import { cn } from "@/lib/utils"function NavigationMenu({  className,  children,  viewport = true,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {  viewport?: boolean}) {  return (    <NavigationMenuPrimitive.Root      data-slot="navigation-menu"      data-viewport={viewport}      className={cn(        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",        className      )}      {...props}    >      {children}      {viewport && <NavigationMenuViewport />}    </NavigationMenuPrimitive.Root>  )}function NavigationMenuList({  className,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {  return (    <NavigationMenuPrimitive.List      data-slot="navigation-menu-list"      className={cn(        "group flex flex-1 list-none items-center justify-center gap-1",        className      )}      {...props}    />  )}function NavigationMenuItem({  className,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {  return (    <NavigationMenuPrimitive.Item      data-slot="navigation-menu-item"      className={cn("relative", className)}      {...props}    />  )}const navigationMenuTriggerStyle = cva(  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1")function NavigationMenuTrigger({  className,  children,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {  return (    <NavigationMenuPrimitive.Trigger      data-slot="navigation-menu-trigger"      className={cn(navigationMenuTriggerStyle(), "group", className)}      {...props}    >      {children}{" "}      <ChevronDownIcon        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"        aria-hidden="true"      />    </NavigationMenuPrimitive.Trigger>  )}function NavigationMenuContent({  className,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {  return (    <NavigationMenuPrimitive.Content      data-slot="navigation-menu-content"      className={cn(        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",        className      )}      {...props}    />  )}function NavigationMenuViewport({  className,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {  return (    <div      className={cn(        "absolute top-full left-0 isolate z-50 flex justify-center"      )}    >      <NavigationMenuPrimitive.Viewport        data-slot="navigation-menu-viewport"        className={cn(          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",          className        )}        {...props}      />    </div>  )}function NavigationMenuLink({  className,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {  return (    <NavigationMenuPrimitive.Link      data-slot="navigation-menu-link"      className={cn(        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",        className      )}      {...props}    />  )}function NavigationMenuIndicator({  className,  ...props}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {  return (    <NavigationMenuPrimitive.Indicator      data-slot="navigation-menu-indicator"      className={cn(        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",        className      )}      {...props}    >      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />    </NavigationMenuPrimitive.Indicator>  )}export {  NavigationMenu,  NavigationMenuList,  NavigationMenuItem,  NavigationMenuContent,  NavigationMenuTrigger,  NavigationMenuLink,  NavigationMenuIndicator,  NavigationMenuViewport,  navigationMenuTriggerStyle,}

Built on Radix UI NavigationMenu with full keyboard support, proper focus management, and all the accessibility features users expect from modern navigation.

npx shadcn@latest add navigation-menu

Regular dropdowns are fine, but navigation menus take it up a notch with better UX patterns:

Organized content - Group related links logically with visual hierarchy
Rich previews - Show descriptions, icons, or featured content
Smooth interactions - Hover delays and animations that feel natural
Keyboard friendly - Arrow keys, tab navigation, escape to close
Touch optimized - Works great on mobile and tablets
Screen reader ready - Proper ARIA labels and announcements

Perfect for modern websites

Works best when you're building something that needs organized navigation - marketing sites, documentation, SaaS apps, e-commerce. The navigation menu gives you that professional polish users expect from quality websites.

Drop it into any React or Next.js project where you want navigation that actually enhances the user experience instead of getting in their way.

Powered by Radix UI

This component is built on top of Radix UI's NavigationMenu primitive, which means you get:

Managed focus - Tab focus is handled automatically between triggers and content
Flexible viewport - Render content outside the list for advanced layouts
Animation variables - CSS variables for viewport dimensions during animations
Motion data attributes - Know which direction content is entering/exiting
Submenu support - Nest navigation menus for complex hierarchies
Delay management - Smart hover delays to prevent accidental triggers

API Reference

NavigationMenuList

Container for all menu items, handles layout and spacing.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	NavigationMenuItem components

NavigationMenuItem

Individual menu item that can trigger content or be a direct link.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	NavigationMenuTrigger and/or NavigationMenuContent

NavigationMenuTrigger

The clickable element that opens dropdown content.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Trigger content (text, icons)

NavigationMenuContent

The dropdown panel that appears when trigger is activated.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`children`	`React.ReactNode`	-	Content for the dropdown panel

NavigationMenuLink

Wrapper for links within navigation content, provides styling and accessibility.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`asChild`	`boolean`	`false`	Pass styling to child element
`children`	`React.ReactNode`	-	Link content

NavigationMenuIndicator

Visual indicator that follows active menu items. Add this to create an underline or arrow that animates between triggers.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`forceMount`	`boolean`	-	Force mount when closed

Data attributes:

[data-state]: "visible" | "hidden"
[data-orientation]: "horizontal" | "vertical"

NavigationMenuViewport

Container that handles content positioning and animations. Radix provides CSS variables you can use for smooth size transitions.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`forceMount`	`boolean`	-	Force mount when closed

CSS variables:

--radix-navigation-menu-viewport-width: Width of active content
--radix-navigation-menu-viewport-height: Height of active content

Helper Functions

navigationMenuTriggerStyle()

Pre-styled classes for consistent trigger appearance.

import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"

<NavigationMenuLink className={navigationMenuTriggerStyle()}>
  About
</NavigationMenuLink>

Key	Action
`Tab`	Move focus to next trigger or out of menu
`Shift + Tab`	Move focus to previous trigger
`Enter` / `Space`	Open focused trigger's content
`Arrow Down`	Move focus to content or next link
`Arrow Up`	Move focus to previous link
`Arrow Left`	Move to previous trigger
`Arrow Right`	Move to next trigger
`Escape`	Close content and return focus
`Home`	Focus first trigger
`End`	Focus last trigger

Content Layout Patterns

Layout	Use Case	Grid Classes
Single Column	Simple link lists	`grid gap-3 p-4`
Two Columns	Organized categories	`grid-cols-2 gap-3 p-4`
Featured + Links	Highlight key content	`grid-cols-[.75fr_1fr]`
Mega Menu	Complex navigation	`grid-cols-4 gap-4 p-6`

Keep it scannable - Group related links, use clear labels
Show what's important - Featured content, descriptions, icons
Test on devices - Make sure touch targets are good on mobile
Handle states - Active pages, hover effects, loading states
Optimize timing - Use delayDuration and skipDelayDuration props for natural hover behavior
Progressive disclosure - Don't overwhelm with too many options
Test accessibility - Keyboard navigation, screen readers, focus management
Use the indicator - Visual feedback helps users track where they are
Animate thoughtfully - Use motion data attributes for directional animations

Complete navigation with mega menu

Why navigation menus work so well