shadcn.io is not affiliated with official shadcn/ui

Shadcn Navigation Menu for React

A collection of links for navigating a site.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/navigation-menu.json

npx shadcn@latest add https://kit.dev/r/aria/navigation-menu.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/navigation-menu.json

yarn shadcn@latest add https://kit.dev/r/aria/navigation-menu.json

Install the following dependencies:

bun add react-aria-components tailwind-variants lucide-react

npm install react-aria-components tailwind-variants lucide-react

pnpm add react-aria-components tailwind-variants lucide-react

yarn add react-aria-components tailwind-variants lucide-react

Copy and paste the following code into your project.

components/ui/navigation-menu.tsx

"use client";

import { ChevronDownIcon } from "lucide-react";
import type React from "react";
import {
  Button as ButtonPrimitive,
  composeRenderProps,
  DialogTrigger,
  type DialogTriggerProps,
  Link as LinkPrimitive,
  type LinkProps,
  Popover as PopoverPrimitive,
} from "react-aria-components";
import { tv } from "tailwind-variants";
import { cn } from "@/lib/utils";

export const NavigationMenu = (props: React.ComponentProps<"nav">) => {
  const { className, ...rest } = props;

Update the import paths to match your project setup.

Anatomy

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

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="#">Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.
`ArrowLeft`	Move left.
`ArrowRight`	Move right.
`Escape`	Close the open panel.

Demos

Rtl

Right-to-left navigation menu. See the RTL configuration guide for document direction.

PreviewCode

API Reference

NavigationMenuList

PropType

className?string

AttributeType

data-slot"navigation-menu-list"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuItem

PropType

className?string

AttributeType

data-slot"navigation-menu-item"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

navigationMenuTriggerStyle

AttributeType

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuTrigger

PropType

className?string

AttributeType

data-slot"navigation-menu-trigger"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuContent

PropType

className?string

AttributeType

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

CSS variableType

--trigger-anchor-pointstring

NavigationMenuLink

PropType

className?string

AttributeType

data-slot"navigation-menu-link"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuIndicator

PropType

className?string

AttributeType

data-slot"navigation-menu-indicator"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuViewport

PropType

className?string

AttributeType

data-slot"navigation-menu-viewport"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuPositioner

PropType

className?string

AttributeType

data-slot"navigation-menu-positioner"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring