Navigation Menu

Preview

Installation

npx shadcn@latest add @cubby-ui/navigation-menu

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuLink />
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuTrigger />
      <NavigationMenuContent>
        <NavigationMenuLink />
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

With Direct Links

Include direct navigation links alongside dropdowns.

Nested Submenus

Create multi-level navigation structures.

Custom Styled Dropdown

Apply custom styling to dropdown content.

With Next.js Link

Integrate with Next.js Link for client-side navigation.

API Reference

The Navigation Menu component is built on top of Base UI's Navigation Menu. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Navigation Menu documentation.

Props

NavigationMenu

Root navigation menu container. Composes NavigationMenu.Root with an internal viewport. Props are forwarded to NavigationMenu.Root.

NavigationMenuLink

Navigation link element. Wraps NavigationMenu.Link.

NavigationMenuSub

Nested submenu container for multi-level navigation. Composes NavigationMenu.Root with internal positioning. Props are forwarded to NavigationMenu.Root.