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.

Custom Props

NavigationMenu

NavigationMenuLink

NavigationMenuViewport

NavigationMenuSub

Modified Defaults

Our implementation changes the following Base UI prop defaults:

• NavigationMenuViewport Positioner: sideOffset defaults to 10 (Base UI defaults to 0)
• NavigationMenuViewport Positioner: collisionPadding defaults to { top: 5, bottom: 5, left: 20, right: 20 }
• NavigationMenuSub Positioner: sideOffset defaults to 24 (Base UI defaults to 0)
• NavigationMenuSub Positioner: alignOffset defaults to -24
• NavigationMenuSub Positioner: align defaults to 'end'
• NavigationMenuSub Positioner: side defaults to 'right'
• NavigationMenuSub: orientation defaults to 'vertical'