# Navigation menu: Right to left

> Content slides follow the direction you move, which flips in right-to-left layouts.

Example: https://hextaui.com/docs/navigation-menu/examples/rtl
Component docs: https://hextaui.com/docs/navigation-menu.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/navigation-menu-rtl.json
```

This adds `components/examples/navigation-menu/rtl.tsx` with the Navigation menu component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/navigation-menu/rtl.tsx"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

const menus = [
  { label: "المنتجات", links: ["المكونات", "القوالب", "السمات"] },
  { label: "الموارد", links: ["التوثيق", "الدعم"] },
]

export function NavigationMenuRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md rounded-xl border px-2 py-1.5">
      <NavigationMenu variant="panel" aria-label="الرئيسية">
        <NavigationMenuList>
          {menus.map((menu) => (
            <NavigationMenuItem key={menu.label}>
              <NavigationMenuTrigger>{menu.label}</NavigationMenuTrigger>
              <NavigationMenuContent>
                <ul className="grid grid-cols-2 gap-1">
                  {menu.links.map((link) => (
                    <li key={link}>
                      <NavigationMenuLink href="#">{link}</NavigationMenuLink>
                    </li>
                  ))}
                </ul>
              </NavigationMenuContent>
            </NavigationMenuItem>
          ))}
        </NavigationMenuList>
      </NavigationMenu>
    </div>
  )
}
```

## Props in this example

### NavigationMenu

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"dropdown" \| "panel"` | `"dropdown"` | dropdown opens under each trigger. panel opens one full-width card under the bar that stays put while content slides. |

## More Navigation menu examples

- [Dropdown](https://hextaui.com/docs/navigation-menu/examples/dropdown.md)
- [Current page](https://hextaui.com/docs/navigation-menu/examples/active.md)