# Context menu: Right to left

> The menu reads the trigger’s direction, so submenus open to the left and arrow keys flip.

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

## Add this example

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

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

## Source

```tsx title="components/examples/context-menu/rtl.tsx"
import { IconArrowLeft, IconArrowRight, IconTrash } from "@tabler/icons-react"

import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"

export function ContextMenuRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 w-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
          انقر بزر الفأرة الأيمن هنا
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>
            <IconArrowRight />
            رجوع
            <ContextMenuShortcut>⌘[</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem>
            <IconArrowLeft />
            تقدم
          </ContextMenuItem>
          <ContextMenuCheckboxItem defaultChecked>
            إظهار الشريط
          </ContextMenuCheckboxItem>
          <ContextMenuSub>
            <ContextMenuSubTrigger>مشاركة</ContextMenuSubTrigger>
            <ContextMenuSubContent>
              <ContextMenuItem>بريد</ContextMenuItem>
              <ContextMenuItem>نسخ الرابط</ContextMenuItem>
            </ContextMenuSubContent>
          </ContextMenuSub>
          <ContextMenuSeparator />
          <ContextMenuItem variant="destructive">
            <IconTrash />
            حذف
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}
```

## Props in this example

### ContextMenuItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "destructive"` | `"default"` |  |

### ContextMenuCheckboxItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultChecked` | `boolean` | `false` |  |

## More Context menu examples

- [File list](https://hextaui.com/docs/context-menu/examples/file-list.md)
- [Controlled](https://hextaui.com/docs/context-menu/examples/controlled.md)
- [Disabled](https://hextaui.com/docs/context-menu/examples/disabled.md)
- [Hold feedback](https://hextaui.com/docs/context-menu/examples/hold-feedback.md)
- [Long content](https://hextaui.com/docs/context-menu/examples/long-content.md)
- [Nested submenus](https://hextaui.com/docs/context-menu/examples/nested.md)
- [Inside a sheet](https://hextaui.com/docs/context-menu/examples/in-sheet.md)
- [Render as another element](https://hextaui.com/docs/context-menu/examples/render.md)