snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/base/breadcrumb-rtl.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import Link from "next/link"
+import { ChevronDownIcon, DotIcon } from "lucide-react"
+
+import {
+  useTranslation,
+  type Translations,
+} from "@/components/language-selector"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/styles/base-nova/ui-rtl/breadcrumb"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/styles/base-nova/ui-rtl/dropdown-menu"
+
+const translations: Translations = {
+  en: {
+    dir: "ltr",
+    values: {
+      home: "Home",
+      components: "Components",
+      documentation: "Documentation",
+      themes: "Themes",
+      github: "GitHub",
+      breadcrumb: "Breadcrumb",
+    },
+  },
+  ar: {
+    dir: "rtl",
+    values: {
+      home: "الرئيسية",
+      components: "المكونات",
+      documentation: "التوثيق",
+      themes: "السمات",
+      github: "جيت هاب",
+      breadcrumb: "مسار التنقل",
+    },
+  },
+  he: {
+    dir: "rtl",
+    values: {
+      home: "בית",
+      components: "רכיבים",
+      documentation: "תיעוד",
+      themes: "ערכות נושא",
+      github: "גיטהאב",
+      breadcrumb: "פירורי לחם",
+    },
+  },
+}
+
+export function BreadcrumbRtl() {
+  const { dir, t, language } = useTranslation(translations, "ar")
+
+  return (
+    <Breadcrumb dir={dir}>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink render={<Link href="/" />}>{t.home}</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <DotIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger
+              render={<button className="flex items-center gap-1" />}
+            >
+              {t.components}
+              <ChevronDownIcon data-icon="inline-end" className="size-3.5" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align={dir === "rtl" ? "end" : "start"}
+              data-lang={dir === "rtl" ? language : undefined}
+              dir={dir}
+            >
+              <DropdownMenuGroup>
+                <DropdownMenuItem>{t.documentation}</DropdownMenuItem>
+                <DropdownMenuItem>{t.themes}</DropdownMenuItem>
+                <DropdownMenuItem>{t.github}</DropdownMenuItem>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <DotIcon />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>{t.breadcrumb}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}