Breadcrumb: Right to left

Separators flip and the collapse animates from the correct side.

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>
  )
}

Add this example

This adds the example as components/examples/breadcrumb/rtl.tsx, together with the Breadcrumb component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/breadcrumb-rtl.json

To add only the component, follow the Breadcrumb installation.

Props in this example

The Breadcrumb props this example sets, from the API reference.

BreadcrumbLink

Prop	Type	Default
`href`	`string`	`–`

BreadcrumbCollapse

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

Every prop is in the Breadcrumb API reference.

More Breadcrumb examples

See them all, with keyboard support and accessibility notes, on the Breadcrumb page.