# Dropdown menu: Right to left

> The menu, submenu chevron and submenu side follow the trigger’s direction. Shortcuts keep their left-to-right order.

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

## Add this example

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

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

## Source

```tsx title="components/examples/dropdown-menu/rtl.tsx"
import {
  IconChevronDown,
  IconLogout,
  IconUser,
  IconUserPlus,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuRtl() {
  return (
    <div dir="rtl">
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          الحساب
          <IconChevronDown data-icon="inline-end" />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>
            <IconUser />
            الملف الشخصي
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuCheckboxItem defaultChecked>
            إظهار الشريط
          </DropdownMenuCheckboxItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <IconUserPlus />
              دعوة
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>بريد</DropdownMenuItem>
              <DropdownMenuItem>رسالة</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuSeparator />
          <DropdownMenuItem variant="destructive">
            <IconLogout />
            تسجيل الخروج
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  )
}
```

## Props in this example

### DropdownMenuTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### DropdownMenuItem

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

### DropdownMenuCheckboxItem

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

## More Dropdown menu examples

- [Safe area](https://hextaui.com/docs/dropdown-menu/examples/safe-area.md)
- [Checkboxes](https://hextaui.com/docs/dropdown-menu/examples/checkboxes.md)
- [Radio group](https://hextaui.com/docs/dropdown-menu/examples/radio-group.md)
- [Check on the right](https://hextaui.com/docs/dropdown-menu/examples/indicator-end.md)
- [Select-like](https://hextaui.com/docs/dropdown-menu/examples/select.md)
- [Row actions](https://hextaui.com/docs/dropdown-menu/examples/row-actions.md)
- [Controlled](https://hextaui.com/docs/dropdown-menu/examples/controlled.md)
- [Open on hover](https://hextaui.com/docs/dropdown-menu/examples/hover.md)
- [Disabled](https://hextaui.com/docs/dropdown-menu/examples/disabled.md)
- [Long content](https://hextaui.com/docs/dropdown-menu/examples/long-content.md)
- [Scrolling](https://hextaui.com/docs/dropdown-menu/examples/scrolling.md)
- [Inside a sheet](https://hextaui.com/docs/dropdown-menu/examples/in-sheet.md)