مسار التصفّح
يعرض مسار الصفحة الحالية باستخدام تسلسل هرمي من الروابط.
Loading demo: breadcrumb-real-world
التثبيت
npx sdaia-ui@latest add breadcrumb
الاستخدام
import { Breadcrumb } from "@/components/ui/breadcrumb"<Breadcrumb levels={3} />الأمثلة
مستويان
استخدم levels={2} لمسار تنقّل بمستويين.
Loading demo: breadcrumb-two-levels
ثلاثة مستويات
مسار التنقل الافتراضي بثلاثة مستويات.
Loading demo: breadcrumb-three-levels
أربعة مستويات
استخدم levels={4} للتسلسل الهرمي الأعمق.
Loading demo: breadcrumb-four-levels
مطوي
استخدم levels="5+" لطيّ الخطوات المتوسطة بعلامة حذف.
Loading demo: breadcrumb-collapsed
Slash الفاصل
استخدم divider="Slash" لاستبدال السهم الافتراضي بشرطة مائلة.
Loading demo: breadcrumb-slash
مرجع الواجهة البرمجية
BreadcrumbProps
خصائص مكوّن Breadcrumb.
Prop | Type | Default | Required |
|---|---|---|---|
items | BreadcrumbItem[] | - | required |
divider | 'chevron' | 'slash' | 'chevron' | optional |
homeIcon | ReactNode | - | optional |
chevronIcon | ReactNode | - | optional |