# Breadcrumb: Right to left

> Separators flip and the collapse animates from the correct side.

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

## Add this example

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

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

## Source

```tsx title="components/examples/breadcrumb/rtl.tsx"
import {
  Breadcrumb,
  BreadcrumbCollapse,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function BreadcrumbRtl() {
  return (
    <div dir="rtl">
      <Breadcrumb>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">الرئيسية</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbCollapse label="عرض المسار الكامل">
            <BreadcrumbItem>
              <BreadcrumbLink href="#">المكونات</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">التنقل</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
          </BreadcrumbCollapse>
          <BreadcrumbItem>
            <BreadcrumbPage>مسار التنقل</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  )
}
```

## Props in this example

### BreadcrumbLink

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `href` | `string` | – |  |

### BreadcrumbCollapse

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | `"Show full path"` | Accessible name of the ellipsis button. |

## More Breadcrumb examples

- [Basic](https://hextaui.com/docs/breadcrumb/examples/basic.md)
- [With icons](https://hextaui.com/docs/breadcrumb/examples/with-icons.md)
- [Custom separator](https://hextaui.com/docs/breadcrumb/examples/custom-separator.md)
- [Dropdown](https://hextaui.com/docs/breadcrumb/examples/dropdown.md)
- [Collapsed](https://hextaui.com/docs/breadcrumb/examples/controlled.md)
- [Ellipsis](https://hextaui.com/docs/breadcrumb/examples/ellipsis.md)
- [Link component](https://hextaui.com/docs/breadcrumb/examples/link-component.md)
- [Long content](https://hextaui.com/docs/breadcrumb/examples/long-content.md)