<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>...</NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
      <NavigationMenuContent>...</NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink
        render={<Link href="/docs" />}
        className={navigationMenuTriggerStyle()}
      >
        Documentation
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Installation

pnpm dlx cubix@latest add navigation-menu --base aria

Usage

Import

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

Example

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink render={<Link href="/docs" />}>
          Documentation
        </NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Composition

Use the following composition to build a NavigationMenu:

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

Basic

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="w-96">
          <li>
            <NavigationMenuLink render={<Link href="/docs" />}>
              Introduction
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Link

Use navigationMenuTriggerStyle() on NavigationMenuLink for a top-level link that matches trigger styling. On Base UI, compose with render; on Radix UI, use asChild.

<NavigationMenuItem>
  <NavigationMenuLink
    render={<Link href="/docs" />}
    className={navigationMenuTriggerStyle()}
  >
    Documentation
  </NavigationMenuLink>
</NavigationMenuItem>

With Icon

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-[200px]">
          <li>
            <NavigationMenuLink
              render={<Link href="#" className="flex-row items-center gap-2" />}
            >
              <CircleHelpIcon />
              Backlog
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API Reference

Prop	Type	Default	Description
align	"start" \| "center" \| "end"	"start"	Alignment of the positioner relative to the trigger (Base UI).
viewport	boolean	true	Whether to render the shared viewport (Radix UI). Set false for per-item popovers.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The navigation list and related content.

NavigationMenuTrigger

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The trigger label shown in the navigation menu.

NavigationMenuContent

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The panel content shown when a trigger is open.

NavigationMenuLink

Prop	Type	Default	Description
render	React.ReactElement	-	Compose the link onto a child element such as Next.js Link (Base UI).
asChild	boolean	-	Compose the link onto a child element such as Next.js Link (Radix UI).
active	boolean	-	Marks the link as the active navigation item.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The link content.