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

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

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

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

Install the following dependencies:

bun add radix-ui lucide-react tailwind-variants

npm install radix-ui lucide-react tailwind-variants

pnpm add radix-ui lucide-react tailwind-variants

yarn add radix-ui lucide-react tailwind-variants

Copy and paste the following code into your project.

components/ui/navigation-menu.tsx

"use client";

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

export const NavigationMenu = (
  props: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
    viewport?: boolean;
  }
) => {
  const { className, children, viewport = true, ...rest } = props;

  return (
    <NavigationMenuPrimitive.Root
      className={cn(

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

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

delayDuration?number

dir?"ltr" | "rtl"

forceMount?true

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-viewport"

data-scope"navigation-menu"

data-part"viewport"

CSS variableType

--radix-navigation-menu-viewport-heightstring

--radix-navigation-menu-viewport-widthstring

NavigationMenuTrigger

button

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

delayDuration?number

dir?"ltr" | "rtl"

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

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

valuestring

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

focusProxyRefReact.RefObject<FocusProxyElement | null>

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

triggerRefReact.RefObject<NavigationMenuTriggerElement | null>

wasEscapeCloseRefReact.MutableRefObject<boolean>

delayDuration?number

dir?"ltr" | "rtl"

forceMount?true

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-content"

data-scope"navigation-menu"

data-part"content"

aria-labelledbyboolean

data-orientationOrientation

data-state"open" | "closed"

data-uidstring

data-valuestring

NavigationMenuList

div

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

delayDuration?number

dir?"ltr" | "rtl"

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-list"

data-scope"navigation-menu"

data-part"list"

data-orientationOrientation

NavigationMenuItem

div

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

delayDuration?number

dir?"ltr" | "rtl"

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-item"

data-scope"navigation-menu"

data-part"item"

data-disabled?string

data-orientationOrientation

data-state"open" | "closed"

data-valuestring

NavigationMenuLink

a

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

active?boolean

delayDuration?number

dir?"ltr" | "rtl"

onSelect?(event: Event) → void

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-link"

data-scope"navigation-menu"

data-part"link"

aria-currentstring

data-current?string

data-ownedbystring

data-valuestring

NavigationMenuIndicator

div

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

delayDuration?number

dir?"ltr" | "rtl"

forceMount?true

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-indicator"

data-scope"navigation-menu"

data-part"indicator"

aria-hiddenboolean

data-orientationOrientation

data-state"open" | "closed"

navigationMenuTriggerStyle

PropType

value?string

defaultValue?string

onValueChange?(value: string) → void

childrenReact.ReactNode

isRootMenuboolean

itemValuestring): void

rootNavigationMenuNavigationMenuElement | null

scopeScope

delayDuration?number

dir?"ltr" | "rtl"

orientation?"vertical" | "horizontal"

skipDelayDuration?number

asChild?boolean

AttributeType

data-scope"navigation-menu"

data-part"root"

aria-labelstring

data-orientationOrientation