SonoJSSonoJS

Navigation Menu

A collection of links for site navigation. Triggers use height h-8. Compose Next.js Link with asChild.

Basic

Triggers with rich content panels and a top-level link.

Installation

CLI
npx @sonojs/ui@latest add navigation-menu
Also needsnpm i lucide-react

Composition

structure
NavigationMenu
├── NavigationMenuList
│   ├── NavigationMenuItem
│   │   ├── NavigationMenuTrigger
│   │   └── NavigationMenuContent
│   │       └── NavigationMenuLink
│   └── NavigationMenuItem
│       └── NavigationMenuLink
└── NavigationMenuViewport

Usage

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

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

Props

PropTypeDefaultDescription
viewportbooleantrueOn `NavigationMenu` — shared floating viewport vs per-item panels.
asChildbooleanfalseOn `NavigationMenuLink` — merge onto a custom link.
classNamestring—Merge extra Tailwind classes on any part.