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

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

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

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

Install the following dependencies:

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

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

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

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

Copy and paste the following code into your project.

components/ui/navigation-menu.tsx

"use client";

import { ark } from "@ark-ui/react/factory";
import { Popover as ArkPopover } from "@ark-ui/react/popover";
import { Portal } from "@ark-ui/react/portal";
import { ChevronDownIcon } from "lucide-react";
import type React from "react";
import { tv } from "tailwind-variants";
import { cn } from "@/lib/utils";

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

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

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

NavigationMenuItem

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

children?ReactNode

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

className?string

AttributeType

data-scope"popover"

data-part"root"

NavigationMenuTrigger

button

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

value?string

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-trigger"

data-scope"popover"

data-part"trigger"

NavigationMenuPositioner

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-positioner"

data-scope"popover"

data-part"positioner"

NavigationMenuContent

div

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-content"

data-scope"popover"

data-part"content"

aria-describedbystring

aria-labelledbystring

data-expanded?string

data-placementstring

data-sidestring

data-state"open" | "closed"

role"dialog"

CSS variableType

--transform-originstring

NavigationMenuList

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

className?string

AttributeType

data-slot"navigation-menu-list"

data-scope"popover"

data-part"root"

navigationMenuTriggerStyle

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

AttributeType

data-scope"popover"

data-part"root"

NavigationMenuLink

a

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

asChild?boolean

className?string

AttributeType

data-slot"navigation-menu-link"

data-scope"popover"

data-part"root"

NavigationMenuIndicator

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

className?string

AttributeType

data-slot"navigation-menu-indicator"

data-scope"popover"

data-part"root"

NavigationMenuViewport

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(details: OpenChangeDetails) → void

triggerValue?string | null

defaultTriggerValue?string | null

onTriggerValueChange?(details: TriggerValueChangeDetails) → void

idstring

autoFocus?boolean

closeOnEscape?boolean

closeOnInteractOutside?boolean

dir?"ltr" | "rtl"

finalFocusEl?() → MaybeElement

ids?object

initialFocusEl?() → HTMLElement | null

portalled?boolean

positioning?PositioningOptions

restoreFocus?boolean

translations?object

className?string

AttributeType

data-slot"navigation-menu-viewport"

data-scope"popover"

data-part"root"