Navigation Menu
Preserves Base UI navigation behavior and uses inset open states. Place one NavigationMenuViewport inside the root.
@neumorphism-ui/navigation-menuPreview
Choose a destination from the navigation menu.
Components · 56
Themes · 5
Installation
Installation: navigation-menu
npx shadcn@latest add @neumorphism-ui/navigation-menuThe CLI resolves npm dependencies, base tokens, utilities, and component source in order.
New to this Registry? Set up the namespace before continuing.
Usage
Import
Navigation Menu import code
"use client";
import { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, NavigationMenuViewport } from "@/components/ui/navigation-menu";Example
Navigation Menu usage code
export default function Example() {
return <div><NavigationMenu aria-label="Product"><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Product</NavigationMenuTrigger><NavigationMenuContent><NavigationMenuLink href="#navigation-guide">Guide</NavigationMenuLink></NavigationMenuContent></NavigationMenuItem></NavigationMenuList><NavigationMenuViewport /></NavigationMenu><p id="navigation-guide">Guide</p></div>;
}API Reference
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
NavigationMenu | value / onValueChange | NavigationMenu.Root.Props | — | The open item and its change handler. |
NavigationMenuLink | render | ReactElement | — | Compose your framework link through render. |
NavigationMenuViewport | side / align / sideOffset | NavigationMenuViewportProps | — | Controls popup placement and spacing. |
Accessibility
- 01
Use real href links for destinations and label the nav landmark.
- 02
Test Tab, arrow keys and Escape, and retain visible focus.