نوار منو (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
MenubarItem
MenubarCheckboxItem
راهنمای استفاده
بکنید
- از
MenubarShortcutبرای نمایش کلیدهای میانبر استفاده کنید تا کاربران حرفهای سریعتر کار کنند - آیتمهای مرتبط را باMenubarSeparatorگروهبندی کنید - ازMenubarCheckboxItemوMenubarRadioItemبرای تنظیمات toggle استفاده کنید
نکنید
- کمتر از ۳ منو نگذارید — برای تعداد کم از
DropdownMenuسادهتر استفاده کنید - از Menubar در اپلیکیشنهای موبایلاول استفاده نکنید — فضای افقی کافی ندارد
دسترسیپذیری
- پیمایش بین منوها با
←و→ - پیمایش بین آیتمها با
↑و↓ - با
EnterیاSpaceمنو باز میشود - با
Escapeمنو بسته میشود - از
role="menubar"وrole="menu"استفاده میشود - سازگار با RTL
کامپوننتهای مرتبط
- NavigationMenu — وقتی ناوبری اصلی سایت با لینکهای مستقیم نیاز دارید، نه منوهای دستوری
- DropdownMenu — وقتی فقط یک منوی کشویی تکی نیاز دارید، نه نوار کامل
- ContextMenu — وقتی اقدامات باید با کلیک راست روی المان خاصی فعال شوند