مسار تنقّل
Breadcrumbمسار تنقّل متاح الوصول في React بروابط وصفحة حالية وفواصل مخصّصة وطيّ للعناصر الوسطى. يستخدم معلم nav وaria-current.
يعرض Breadcrumb موقع الصفحة الحالية داخل الموقع. استخدم BreadcrumbLink للصفحات الأعلى وBreadcrumbPage للصفحة الحالية.
متى تستخدمه
استخدم Breadcrumb في الصفحات الأعمق من مستوى واحد في البوّابة ليرى المستخدم موضعه ويصعد. اعرض المسار قرب أعلى الصفحة واستخدم BreadcrumbPage للصفحة الحالية.
اطوِ الوسط في المسارات الطويلة. لا تجعل مسار التنقّل وسيلة التنقّل الوحيدة.
أمثلة
الخصائص
الخصائص التي يعرّفها Breadcrumb. سمات العنصر الأصلي تمرّ كما هي.
<Breadcrumb>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
size | "sm" | "md" |
<BreadcrumbLink>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | Render as the consumer element (e.g., a router Link) via Radix Slot. |
<BreadcrumbPage>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
asChild | boolean | Render as the consumer element (e.g., a heading) via Radix Slot. |
<BreadcrumbSeparator>
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
children | react.ReactNode | Override the default ChevronRight icon with custom content (e.g., /, ·,
or your own SVG). The wrapper itself stays aria-hidden since separators
are decorative - the visited-state structure is conveyed via the <ol>
|
إمكانية الوصول
يعرض Breadcrumb عنصر <nav> بـ aria-label وقائمة مرتّبة، فيُعرض معلمًا. تحمل الصفحة الحالية aria-current="page"، والفواصل مخفية عن التقنيات المساعدة.
علامة الحذف للعناصر المطوية زر يكشف الروابط المخفية.