Navigation Menu

A navigation menu is a horizontal bar of links and dropdown panels for site-level navigation, with support for nested submenus. Use it for a primary site header; for a single dropdown of actions tied to a button, use DropdownMenu instead.

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>

Composition

NavigationMenu
└── NavigationMenuList
    └── NavigationMenuItem
        ├── NavigationMenuTrigger
        │   └── NavigationMenuIcon
        ├── NavigationMenuContent
        │   └── NavigationMenuLink
        └── NavigationMenuSub
            ├── NavigationMenuSubTrigger
            └── NavigationMenuContent

NavigationMenu composes the viewport internally. Use NavigationMenuLink with standalone for top-level links that have no dropdown.

Examples

With Direct Links

Set standalone on NavigationMenuLink to mix plain links in with the dropdowns.

Nested Submenus

Use NavigationMenuSub inside a NavigationMenuContent to build multi-level menus.

Custom Styled Dropdown

Pass a className to NavigationMenuContent to restyle a dropdown panel.

With Next.js Link

Use the render prop on NavigationMenuLink to route through a Next.js Link.

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.