Navigation Menu
Use NavigationMenu for top-level site links with optional groups revealed from a trigger.
Preview
Product navigation
Open Product to find Components and Themes links, or follow Guides directly to the matching section.
Loading preview.
Installation
New to this Registry? Complete the base setup before continuing.
npx shadcn@latest add @neumorphism-ui/navigation-menuInstall the shared base once, then add components and their dependencies with the CLI.
Usage
Compose the list and items, pair each trigger with content, and include NavigationMenuViewport. Use real NavigationMenuLink destinations inside the revealed group.
"use client";
import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from "@/components/ui/navigation-menu";
export default function Example() {
return (
<NavigationMenu aria-label="Main navigation">
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Resources</NavigationMenuTrigger>
<NavigationMenuContent><NavigationMenuLink href="/guides">Guides</NavigationMenuLink></NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
<NavigationMenuViewport />
</NavigationMenu>
);
}API Reference
Preserves Base UI navigation behavior and uses inset open states. Place one NavigationMenuViewport inside the root.
| 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.