مسیریاب (Breadcrumb)
نمایش مسیر به منبع فعلی با استفاده از سلسله مراتب لینکها
معرفی
کامپوننت Breadcrumb برای نمایش مسیر ناوبری و موقعیت فعلی کاربر در سایت استفاده میشود.
استفاده
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@parto/ui';
export default function MyComponent() {
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">خانه</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/components">کامپوننتها</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}ویژگیها
- نمایش مسیر ناوبری
- جداکننده قابل سفارشیسازی
- پشتیبانی از Ellipsis برای مسیرهای طولانی
- کاملا دسترسیپذیر
- سازگار با RTL
جداکننده سفارشی
میتوانید از یک کامپوننت سفارشی به عنوان جداکننده استفاده کنید:
<BreadcrumbSeparator>
<Icons.chevronLeft className="w-4 h-4" />
</BreadcrumbSeparator>استفاده از Dropdown
برای مسیرهای طولانی میتوانید از dropdown استفاده کنید:
<BreadcrumbItem>
<BreadcrumbEllipsis />
</BreadcrumbItem>