Skip to main content
ParticleUI

Navigation Menu

Accessible site navigation with dropdown panels, built on Radix UI.

NavigationMenu renders inline nav with dropdown panels. Best seen in a full layout context — see the docs for a complete example.

Installation

1

Run the CLI

$npx particleui-cli add navigation-menu

Usage

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

export default function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Details

Source filecomponents/ui/navigation-menu.tsx
Typeui
Categoriesnavigation, core
npm dependencies@radix-ui/react-navigation-menu, lucide-react, tailwind-variants
Registry deps
Claude skill