ناوبری

پرتو یک سیستم ناوبری پیچیده دارد تا چندین محصول و سطوح سلسله مراتبی را مدیریت کند. این صفحه الگوهای کلی، بهترین روش‌ها، و کامپوننت‌های درگیر را معرفی می‌کند.

کامپوننت‌ها

NavMenu

یک لیست افقی از view های مرتبط در یک زمینه PageLayout یکنواخت، که امکان سازماندهی بهتر در سطح صفحه را فراهم می‌کند. فعال کردن یک آیتم NavMenu باید تغییر URL را trigger کند.

<NavMenu>
  <NavMenuItem href="/dashboard">داشبورد</NavMenuItem>
  <NavMenuItem href="/settings">تنظیمات</NavMenuItem>
  <NavMenuItem href="/analytics">تحلیل‌ها</NavMenuItem>
</NavMenu>

Sidebar

ناوبری کناری برای دسترسی به بخش‌های اصلی اپلیکیشن:

<Sidebar>
  <SidebarGroup>
    <SidebarGroupLabel>اصلی</SidebarGroupLabel>
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton href="/dashboard">
          <Home />
          <span>داشبورد</span>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  </SidebarGroup>
</Sidebar>

Breadcrumb

برای نمایش مسیر فعلی و امکان ناوبری به سطوح بالاتر:

<Breadcrumb>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">خانه</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbLink href="/projects">پروژه‌ها</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbItem>
    <BreadcrumbPage>پروژه فعلی</BreadcrumbPage>
  </BreadcrumbItem>
</Breadcrumb>

الگوهای ناوبری

ناوبری اصلی

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

ناوبری ثانویه

ناوبری ثانویه در sidebar یا در زیر ناوبری اصلی قرار دارد و دسترسی به زیربخش‌ها را فراهم می‌کند.

ناوبری محلی

ناوبری محلی در سطح صفحه برای جابجایی بین view های مرتبط در همان بخش استفاده می‌شود.

بهترین روش‌ها

1. واضح بودن: همیشه به کاربران نشان دهید کجا هستند
2. دسترسی آسان: ناوبری باید همیشه قابل دسترسی باشد
3. سلسله مراتب: از سلسله مراتب واضح برای سازماندهی ناوبری استفاده کنید
4. واکنش‌گرایی: ناوبری باید در همه اندازه‌های صفحه کار کند
5. RTL: همه کامپوننت‌های ناوبری از RTL پشتیبانی می‌کنند

حالت فعال

همیشه به کاربران نشان دهید کدام آیتم ناوبری فعال است:

<NavMenuItem href="/dashboard" isActive={pathname === '/dashboard'}>
  داشبورد
</NavMenuItem>

آیکون‌ها

از آیکون‌ها برای بهبود خوانایی ناوبری استفاده کنید:

<SidebarMenuButton href="/dashboard">
  <Home />
  <span>داشبورد</span>
</SidebarMenuButton>