البناء · جديد

مسار التنقل

يبيّن موقع الصفحة في التسلسل ويتيح الرجوع إلى المستويات الأعلى. آخر مستوى هو الصفحة الحالية وليس رابطًا.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/breadcrumbs

الاعتماديات التي يضيفها: @base-ui/react, @phosphor-icons/react

الاستخدام

import { BreadcrumbItem, Breadcrumbs } from "@/components/ui/breadcrumbs";

<Breadcrumbs>
  <BreadcrumbItem href="/" home />
  <BreadcrumbItem href="/accounts">Accounts</BreadcrumbItem>
  <BreadcrumbItem current>Q1 2026 statement</BreadcrumbItem>
</Breadcrumbs>

أمثلة

شعار المنتج

‏Type = Logo: مرّر شعارك بدل أيقونة الرئيسية، وأعطه اسمًا. الشعار لا ينعكس.

مستوى طويل

يُقص المستوى الطويل عند 160 بكسل، ويظهر اسمه كاملًا في تلميح عند المرور أو التركيز، فقط حين يُقص فعلًا.

مستويات مطوية

‏BreadcrumbCollapsed يجمع المستويات الوسطى خلف «…» في قائمة.

روابط الموجّه

مرّر <Link> من Next في render: يحتفظ بسلوكه ويأخذ مظهر المستوى.

مرجع الخصائص

Breadcrumbs

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		المستويات بالترتيب من الأعلى إلى الصفحة الحالية.

BreadcrumbItem

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label: عنوان الصفحة كما هو.
`href`	`string`		وجهة المستوى.
`render`	`ReactElement`		رابط موجّه (`<Link>`) بمظهر المستوى.
`current`	`boolean`	`false`	خاصية Current: الصفحة الحالية، ليست رابطًا، مع `aria-current="page"`.
`home`	`boolean`	`false`	‏Type = Icon: أيقونة HouseLine باسم «الرئيسية». مرّر شعارك كأبناء لـType = Logo.

BreadcrumbCollapsed

الخاصية	النوع	الافتراضي	الوصف
`items`	`{ label, href }[]`		المستويات الوسطى المطوية بالترتيب.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	ينتقل بين الروابط؛ الصفحة الحالية ليست ضمنها.
`Enter`	يفتح المستوى، أو قائمة المستويات المطوية.
`ArrowDownArrowUp`	داخل القائمة: بين المستويات المطوية.

ARIA

عنصر nav باسم «مسار التنقل» بلغة الصفحة، وقائمة مرتبة ol.
آخر مستوى aria-current="page"، والفواصل مخفية عن قارئ الشاشة.
زر «…» باسم «إظهار المستويات المخفية» ويفتح قائمة روابط.

ملاحظات العربية والاتجاه

ينعكس

المسار يبدأ من اليمين، والفواصل تتجه لليسار.
قائمة المستويات المطوية تنفتح تحت «…» عند حافة البداية.

لا ينعكس

الشعار وأيقونة الرئيسية.

الأرقام: الأرقام في العناوين كما كُتبت؛ استخدم formatNumber لما تولّده.
الخط العربي: ‏body-14 بوزن Medium للمستويات وSemibold للصفحة الحالية.
النص ثنائي الاتجاه: لا تثبّت فاصلًا يتجه لليمين: الفاصل يتبع الاتجاه وحده. ضع الأسماء الإنجليزية داخل عنوان عربي في <bdi>.

كل المكونات ›