پرتوپرتو

نوار منو (Menubar)

یک نوار منوی افقی برای ناوبری و دستورات

معرفی

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

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

  • برای اپلیکیشن‌های دسکتاپی با منوهای سطح بالا (فایل، ویرایش، نمایش)
  • وقتی ۳ یا بیشتر گروه منو دارید که هر کدام آیتم‌های مرتبط دارند
  • برای دسترسی سریع به دستورات و تنظیمات اپلیکیشن

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

  • برای application های موبایل‌اول — از Sidebar یا bottom navigation استفاده کنید
  • وقتی کمتر از ۳ منو دارید — از DropdownMenu ساده‌تر استفاده کنید

استفاده

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from '@parto-system-design/ui'

export default function MyComponent() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>فایل</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>جدید</MenubarItem>
          <MenubarItem>باز کردن</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>ذخیره</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>ویرایش</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>برش</MenubarItem>
          <MenubarItem>کپی</MenubarItem>
          <MenubarItem>چسباندن</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}

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

با Checkbox

<MenubarMenu>
  <MenubarTrigger>نمایش</MenubarTrigger>
  <MenubarContent>
    <MenubarCheckboxItem checked={showPanel}>نمایش پنل</MenubarCheckboxItem>
    <MenubarCheckboxItem checked={showStatusBar}>نمایش نوار وضعیت</MenubarCheckboxItem>
  </MenubarContent>
</MenubarMenu>

با Radio Group

<MenubarMenu>
  <MenubarTrigger>تنظیمات</MenubarTrigger>
  <MenubarContent>
    <MenubarRadioGroup value={theme} onValueChange={setTheme}>
      <MenubarRadioItem value="light">روشن</MenubarRadioItem>
      <MenubarRadioItem value="dark">تاریک</MenubarRadioItem>
      <MenubarRadioItem value="system">سیستم</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarContent>
</MenubarMenu>

با زیرمنو

<MenubarMenu>
  <MenubarTrigger>فایل</MenubarTrigger>
  <MenubarContent>
    <MenubarSub>
      <MenubarSubTrigger>باز کردن اخیر</MenubarSubTrigger>
      <MenubarSubContent>
        <MenubarItem>فایل 1</MenubarItem>
        <MenubarItem>فایل 2</MenubarItem>
      </MenubarSubContent>
    </MenubarSub>
  </MenubarContent>
</MenubarMenu>

با کلید میانبر

<MenubarItem>
  ذخیره
  <MenubarShortcut>⌘S</MenubarShortcut>
</MenubarItem>

Props

Prop

Type

Prop

Type

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

بکنید

  • از MenubarShortcut برای نمایش کلیدهای میانبر استفاده کنید تا کاربران حرفه‌ای سریع‌تر کار کنند - آیتم‌های مرتبط را با MenubarSeparator گروه‌بندی کنید - از MenubarCheckboxItem و MenubarRadioItem برای تنظیمات toggle استفاده کنید

نکنید

  • کمتر از ۳ منو نگذارید — برای تعداد کم از DropdownMenu ساده‌تر استفاده کنید - از Menubar در اپلیکیشن‌های موبایل‌اول استفاده نکنید — فضای افقی کافی ندارد

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

  • پیمایش بین منوها با و
  • پیمایش بین آیتم‌ها با و
  • با Enter یا Space منو باز می‌شود
  • با Escape منو بسته می‌شود
  • از role="menubar" و role="menu" استفاده می‌شود
  • سازگار با RTL

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

  • NavigationMenu — وقتی ناوبری اصلی سایت با لینک‌های مستقیم نیاز دارید، نه منوهای دستوری
  • DropdownMenu — وقتی فقط یک منوی کشویی تکی نیاز دارید، نه نوار کامل
  • ContextMenu — وقتی اقدامات باید با کلیک راست روی المان خاصی فعال شوند