مسار تنقل
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"، وتبقى الفواصل مخفية عن التقنيات المساعدة.
تعمل علامة الحذف للعناصر المطوية كزر يكشف الروابط المخفية.