مسیریاب (Breadcrumb)

معرفی

کامپوننت Breadcrumb برای نمایش مسیر ناوبری و موقعیت فعلی کاربر در سایت استفاده می‌شود.

چه زمانی استفاده کنیم:

• وقتی سایت ساختار سلسله‌مراتبی دارد و کاربر در سطوح عمیق ناوبری قرار می‌گیرد
• در کنار PageHeader برای نمایش مسیر صفحه فعلی
• وقتی کاربر باید بتواند به سطوح بالاتر بازگردد

چه زمانی استفاده نکنیم:

• در navigation تک‌سطحی — وقتی همه صفحات هم‌عرض هستند breadcrumb معنا ندارد
• داخل modal یا drawer — breadcrumb برای navigation سطح صفحه است

استفاده

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@parto-system-design/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>
  )
}

حالت‌ها و انواع

جداکننده سفارشی

می‌توانید از یک کامپوننت سفارشی به عنوان جداکننده استفاده کنید:

<BreadcrumbSeparator>
  <Icons.chevronLeft className="w-4 h-4" />
</BreadcrumbSeparator>

استفاده از Dropdown

برای مسیرهای طولانی می‌توانید از dropdown استفاده کنید:

<BreadcrumbItem>
  <BreadcrumbEllipsis />
</BreadcrumbItem>

کامپوننت‌ها

• Breadcrumb — wrapper اصلی با nav و aria-label
• BreadcrumbList — لیست آیتم‌های مسیر
• BreadcrumbItem — هر آیتم مسیر
• BreadcrumbLink — لینک کلیک‌پذیر
• BreadcrumbPage — صفحه جاری (غیرقابل کلیک)
• BreadcrumbSeparator — جداکننده
• BreadcrumbEllipsis — نقاط برای مسیرهای طولانی

Props

BreadcrumbLink

راهنمای استفاده

دسترسی‌پذیری

• از nav با aria-label="breadcrumb" استفاده می‌شود
• صفحه جاری با aria-current="page" مشخص می‌شود
• جداکننده با aria-hidden پنهان می‌شود
• سازگار با RTL

کامپوننت‌های مرتبط

• PageHeader — breadcrumb معمولاً داخل PageHeader قرار می‌گیرد تا مسیر ناوبری در بالای صفحه نمایش داده شود
• AppBar — می‌توانید breadcrumb را در slot nav قرار دهید تا در سطح اپلیکیشن نمایش داده شود