# Sidebar: Right to left

> Set `dir="rtl"` and `side="right"`. Spacing, submenu lines, tooltips and the trigger icon mirror.

Example: https://hextaui.com/docs/sidebar/examples/rtl
Component docs: https://hextaui.com/docs/sidebar.md

## Add this example

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

This adds `components/examples/sidebar/rtl.tsx` with the Sidebar component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/sidebar/rtl.tsx"
import { IconHome, IconInbox, IconSettings } from "@tabler/icons-react"

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
} from "@/components/ui/sidebar"

const items = [
  { title: "الرئيسية", icon: IconHome },
  { title: "البريد الوارد", icon: IconInbox, badge: "٢٤" },
  { title: "الإعدادات", icon: IconSettings },
]

export function SidebarRtl() {
  return (
    <SidebarProvider dir="rtl" className="h-96 min-h-0">
      <Sidebar side="right" collapsible="icon" dir="rtl">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>التطبيق</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {items.map((item, index) => (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      isActive={index === 0}
                      tooltip={item.title}
                    >
                      <item.icon />
                      <span>{item.title}</span>
                    </SidebarMenuButton>
                    {item.badge && (
                      <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>
                    )}
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="flex h-14 items-center px-4">
          <SidebarTrigger className="-ms-1" />
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}
```

## Props in this example

### Sidebar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `side` | `"left" \| "right"` | `"left"` |  |
| `collapsible` | `"offcanvas" \| "icon" \| "none"` | `"offcanvas"` |  |
| `dir` | `"ltr" \| "rtl"` | – | Also sets the direction of the phone sheet. |

### SidebarMenuButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `isActive` | `boolean` | `false` | Highlights it and sets aria-current="page". |
| `tooltip` | `ReactNode \| TooltipContentProps` | – | Shown while collapsed to icons. Content slides between items as you move along the menu. |

## More Sidebar examples

- [Variants](https://hextaui.com/docs/sidebar/examples/variants.md)
- [Collapsible](https://hextaui.com/docs/sidebar/examples/collapsible.md)
- [Collapsible groups and submenus](https://hextaui.com/docs/sidebar/examples/submenus.md)
- [Right side](https://hextaui.com/docs/sidebar/examples/right.md)
- [Under a header](https://hextaui.com/docs/sidebar/examples/header.md)
- [Controlled](https://hextaui.com/docs/sidebar/examples/controlled.md)
- [Loading](https://hextaui.com/docs/sidebar/examples/skeleton.md)