Replaced the multi-icon-library IconPlaceholder abstraction with a plain lucide-react ChevronDownIcon
Converted the trigger chevron's ml-1 spacing to logical ms-1 so the gap sits between label and icon in both directions
Added rtl: variants mirroring the panel's enter/exit slide translations and the indicator arrow, so animation direction follows the writing direction

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/navigation-menu

Usage

import {
 
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
 
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Link Component

Use the render prop to compose a custom link component such as Next.js Link while keeping the menu behavior.

import Link from "next/link"
 
<NavigationMenuItem>
  <NavigationMenuLink
    render={<Link href="/docs" />}
    className={navigationMenuTriggerStyle()}
  >
    Documentation
  </NavigationMenuLink>
</NavigationMenuItem>

RTL

Wrap your application — or just the menu — in Base UI's DirectionProvider with direction="rtl" and the menu follows the reading direction automatically: panel alignment mirrors (the default align opens panels along the reading flow; pass one explicitly to override), and enter/exit slides mirror through Tailwind rtl: variants. Content panels render in a portal at document.body, so on a site that isn't RTL by default also pass dir="rtl" to the menu root and each NavigationMenuContent for correct text layout inside the panel.

API Reference

Prop	Type	Default	Description
align	"start" \| "center" \| "end"	mirrors with direction	How the content popup aligns to the trigger. Defaults to start in LTR and end in RTL, read from Base UI's DirectionProvider context; pass an explicit value to override.
class	string	-	Additional classes for the root element.
…props	NavigationMenuPrimitive.Root.Props	-	All other props are forwarded to the Base UI Navigation Menu root. See the Base UI docs for the full list.

NavigationMenuTrigger

Prop	Type	Default	Description
class	string	-	Additional classes merged over navigationMenuTriggerStyle().

NavigationMenuContent

Prop	Type	Default	Description
class	string	-	Additional classes for the content panel rendered inside the shared viewport.

NavigationMenuLink

Prop	Type	Default	Description
render	ReactElement \| function	-	Render as a custom element such as next/link while keeping menu behavior.
class	string	-	Additional classes for the link.

See the Base UI Navigation Menu docs for the full prop and part reference.

Edit this page on GitHub

PreviousNative Select NextPagination