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/base/navigation-menu.json

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

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

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

Install the following dependencies:

bun add @base-ui/react lucide-react tailwind-variants

npm install @base-ui/react lucide-react tailwind-variants

pnpm add @base-ui/react lucide-react tailwind-variants

yarn add @base-ui/react lucide-react tailwind-variants

Copy and paste the following code into your project.

components/ui/navigation-menu.tsx

"use client";

import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
import { ChevronDownIcon } from "lucide-react";
import type React from "react";
import { tv } from "tailwind-variants";
import { cn } from "@/lib/utils";

export const NavigationMenu = (
  props: NavigationMenuPrimitive.Root.Props &
    Pick<NavigationMenuPrimitive.Positioner.Props, "align">
) => {
  const { align = "start", className, children, ...rest } = props;

  return (
    <NavigationMenuPrimitive.Root
      className={cn(
        "cn-navigation-menu group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",

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

NavigationMenuViewport

div

AttributeType

data-scope"navigation-menu"

data-part"viewport"

CSS variableType

--available-widthstring

--popup-heightstring

--popup-widthstring

--positioner-heightstring

--positioner-widthstring

--transform-originstring

NavigationMenuTrigger

button

PropType

disabled?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"navigation-menu-trigger"

data-scope"navigation-menu"

data-part"trigger"

aria-controlsboolean

aria-expandedboolean

data-disabled?string

data-state"open" | "closed"

data-trigger-proxy-idstring

data-uidstring

data-valuestring

type"button"

NavigationMenuContent

div

PropType

keepMounted?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"navigation-menu-content"

data-scope"navigation-menu"

data-part"content"

aria-labelledbyboolean

data-orientationstring

data-state"open" | "closed"

data-uidstring

data-valuestring

NavigationMenuLink

a

PropType

active?boolean

closeOnClick?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"navigation-menu-link"

data-scope"navigation-menu"

data-part"link"

aria-currentstring

data-current?string

data-ownedbystring

data-valuestring

NavigationMenuList

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"navigation-menu-list"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuItem

PropType

value?any

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"navigation-menu-item"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

navigationMenuTriggerStyle

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring

NavigationMenuPositioner

div

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-scope"navigation-menu"

data-part"positioner"

CSS variableType

--available-widthstring

--popup-heightstring

--popup-widthstring

--positioner-heightstring

--positioner-widthstring

--transform-originstring

NavigationMenuIndicator

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"navigation-menu-indicator"

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationstring