Shadcn Navigation Menu

React navigation menu for site headers with dropdowns and mega menus. Built with TypeScript and Tailwind CSS for Next.js using Base UI — hover delays and keyboard nav.

A navigation menu is a site header of links. Hover or focus a trigger and the panel opens; move to the next trigger and the panel switches. Use it for marketing and docs headers, not File, Edit, View.

Scroll to load preview...

Looking for a neobrutalism version for shadcn?

Same navigation menu, thicker borders. The NeoBrutalism navigation menu is the kit if you want that look.

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

viewport is true by default — the wrapper mounts the shared panel. A top-level link with no dropdown is NavigationMenuLink plus navigationMenuTriggerStyle().

Composition

NavigationMenuTrigger

NavigationMenuLink

NavigationMenuIndicator

RTL

Wrap with DirectionProvider and dir="rtl". Copy in Arabic.

Scroll to load preview...

API

Prop

Type

NavigationMenuLink

Prop

Type

navigationMenuTriggerStyle() is the trigger class list — put it on a top-level NavigationMenuLink so a plain link matches the dropdowns. Viewport width and height are --radix-navigation-menu-viewport-width and --radix-navigation-menu-viewport-height.

Keyboard

Key	Action
`Space` / `Enter`	Open the focused trigger
`Tab`	Next focusable control
`ArrowDown`	Into the open panel, or the next trigger
`ArrowUp`	Previous trigger or link
`ArrowRight` / `ArrowLeft`	Next / previous trigger. In vertical, into the panel
`Home` / `End`	First / last trigger or link
`Escape`	Close the panel and return to its trigger

Notes

Use NavigationMenuLink for every link

render={<Link href="…" />} then the label. A raw <a> inside NavigationMenuContent drops out of the keyboard list. A href on the menu link plus a Link child is two <a>s.

Don’t use this as File, Edit, View — that is a Menubar.