Navigation Menu
Navigation links with expandable panels.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Navigation Menu
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/navigation-menu.json'Usage
A complete example using the installed component and hook paths.
Navigation Menu usage
"use client";import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/navigation-menu";function NavigationMenuPreview() { return ( <NavigationMenu> <NavigationMenuList> <NavigationMenuItem> <NavigationMenuTrigger>Explore</NavigationMenuTrigger> <NavigationMenuContent> <div className="grid w-56 gap-1"> <NavigationMenuLink href="/docs">All components</NavigationMenuLink> <NavigationMenuLink href="/">Home</NavigationMenuLink> </div> </NavigationMenuContent> </NavigationMenuItem> <NavigationMenuItem> <NavigationMenuLink href="/docs">Components</NavigationMenuLink> </NavigationMenuItem> </NavigationMenuList> </NavigationMenu> );}export default function Demo() { return <NavigationMenuPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
NavigationMenu
NavigationMenu props
NavigationMenuPrimitive.Root.Props & Pick<NavigationMenuPrimitive.Positioner.Props, "align">- align
- "start"
NavigationMenuContent
NavigationMenuContent props
NavigationMenuPrimitive.Content.PropsNavigationMenuIndicator
NavigationMenuIndicator props
React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>NavigationMenuItem
NavigationMenuItem props
React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>NavigationMenuLink
NavigationMenuLink props
NavigationMenuPrimitive.Link.Props & { sound?: boolean }- sound
- true
NavigationMenuList
NavigationMenuList props
React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>NavigationMenuTrigger
NavigationMenuTrigger props
NavigationMenuPrimitive.Trigger.Props & { sound?: boolean }- sound
- true
navigationMenuTriggerStyle
Exported value.
NavigationMenuPositioner
NavigationMenuPositioner props
NavigationMenuPrimitive.Positioner.Props- side
- "bottom"
- sideOffset
- 8
- align
- "start"
- alignOffset
- 0