Menubar

نواری از منوهای کشویی که مثل نوار منوی نرم‌افزارهای دسکتاپ کار می‌کند: با کلیک باز می‌شود و بعد از آن، عبور نشانگر روی بقیهٔ عنوان‌ها منوی آن‌ها را باز می‌کند. برای ابزارهای سنگین مثل ویرایشگر یا داشبورد مدیریتی.

این کامپوننت فعلاً برای ۱ فریم‌ورک از ۴ فریم‌ورک آماده است.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

نصب

با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگی‌ها و فایل‌ها خودکار اضافه می‌شوند.

pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/menubar.json

npx dig-ui@latest add https://design-system-tau-green.vercel.app/r/menubar.json

yarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/menubar.json

bunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/menubar.json

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

استفاده

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>پرونده</MenubarTrigger>
    <MenubarContent>
      <MenubarItem onSelect={newFile}>سند تازه</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

ترکیب اجزا

هر ستون یک MenubarMenu است با یک تریگر و یک محتوا؛ تفاوتش با چند DropdownMenu کنار هم این است که وقتی یکی باز شد، بقیه با عبور ساده نشانگر باز می‌شوند و ناوبری افقی با کلیدهای جهت‌دار بین همهٔ منوها کار می‌کند. اجزای داخل منو (آیتم، چک‌باکس، رادیو، برچسب، میان‌بر و زیرمنو) دقیقاً همان‌های منوی کشویی‌اند. میان‌برها با dir=ltr رندر می‌شوند تا ترکیب کلیدها در متن فارسی به‌هم نریزد.

دسترس‌پذیری

کلیدهای چپ و راست بین منوها و بالا و پایین بین آیتم‌ها حرکت می‌کنند؛ جهت افقی از dir صفحه می‌آید و در راست‌به‌چپ برعکس می‌شود.
زیرمنو با کلید جهت‌دارِ سمت باز شدن (در راست‌به‌چپ، کلید چپ) باز و با کلید مخالف بسته می‌شود.
MenubarShortcut فقط نمایشی است؛ اتصال واقعی کلید را خودتان با یک شنوندهٔ keydown بنویسید.
تایپ حروف، جستجوی سریع بین آیتم‌ها را فعال می‌کند؛ متن آیتم را با کلمهٔ کلیدی شروع کنید.
این الگو برای موبایل مناسب نیست؛ در صفحه‌های کوچک به منوی کشویی یا کشو تبدیلش کنید.

مرجع API

Menubar

ویژگی	نوع	پیش‌فرض	توضیح
value / onValueChange	string / (value: string) => void	—	کنترل اینکه کدام منو باز است.
defaultValue	string	—	منوی بازِ اولیه.
loop	boolean	false	رسیدن به آخرین منو با کلید جهت‌دار دوباره به اولی برمی‌گردد.
dir	"rtl" \| "ltr"	—	جهت ناوبری؛ معمولاً از dir صفحه (html) ارث می‌رسد.

MenubarMenu / MenubarTrigger / MenubarContent

ویژگی	نوع	پیش‌فرض	توضیح
MenubarMenu value	string	—	شناسهٔ منو؛ برای کنترل‌شده کردن Menubar لازم است.
MenubarContent align	"start" \| "center" \| "end"	"start"	ترازِ منو نسبت به تریگر؛ در rtl مقدار start یعنی سمت راست.
MenubarContent sideOffset	number	8	فاصلهٔ منو از نوار.

MenubarItem

ویژگی	نوع	پیش‌فرض	توضیح
variant	"default" \| "destructive"	"default"	حالت خطرناک، متن و آیکون را قرمز می‌کند.
inset	boolean	false	فاصلهٔ اضافی از سمت شروع برای هم‌ترازی.
onSelect	(event: Event) => void	—	انتخاب آیتم؛ با preventDefault منو بعد از کلیک باز می‌ماند.
disabled	boolean	false	خارج کردن آیتم از تعامل و ناوبری.

MenubarSub / MenubarShortcut

ویژگی	نوع	پیش‌فرض	توضیح
MenubarSubTrigger	Component	—	آیتمی که زیرمنو را باز می‌کند؛ فلش جهت‌آگاه دارد.
MenubarSubContent	Component	—	محتوای زیرمنو.
MenubarShortcut	span	—	میان‌بر در انتهای آیتم؛ همیشه dir=ltr است و فقط نمایشی.

این کامپوننت هنوز برای Vue پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Reka UI در دست کار است.

این کامپوننت هنوز برای Svelte پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Bits UI در دست کار است.

این کامپوننت هنوز برای Angular پورت نشده است.

نسخهٔ ری‌اکت آماده است؛ پورت این فریم‌ورک روی Angular CDK در دست کار است.

نمونه‌ها

Checkbox and Radio Items

برای تنظیم‌های دوحالته و انتخاب تکی؛ نشانگر انتخاب در سمت شروع می‌نشیند.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

Disabled and Inset

آیتم غیرفعال فوکوس نمی‌گیرد و inset متن را هم‌تراز آیتم‌های دارای نشانگر می‌کند.

این نمونه هنوز برای Vue پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Svelte پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

این نمونه هنوز برای Angular پورت نشده است؛ آنچه می‌بینید نسخهٔ ری‌اکت است.

کدام نمونه برای کدام موقعیت

نمونه	کجا به کار می‌آید
Checkbox and Radio Items	برای تنظیم‌های دوحالته و انتخاب تکی؛ نشانگر انتخاب در سمت شروع می‌نشیند.
Disabled and Inset	آیتم غیرفعال فوکوس نمی‌گیرد و inset متن را هم‌تراز آیتم‌های دارای نشانگر می‌کند.

دستورالعمل استفاده

دسته‌بندی با جداکننده

انجام بده

دستورهای هم‌خانواده را با MenubarSeparator از هم جدا کنید و عملیات خطرناک را با فاصله در انتها بگذارید تا اشتباه کلیک نشود.

انجام نده

فهرست یک‌دستِ بدون گروه‌بندی، پیدا کردن دستور را کند می‌کند و «بستن بدون ذخیره» درست کنار «ذخیره» می‌نشیند.

غیرفعال به‌جای حذف

انجام بده

دستوری که در وضعیت فعلی کار نمی‌کند را غیرفعال نشان دهید؛ جای آیتم‌ها ثابت می‌ماند و کاربر یاد می‌گیرد کجا دنبالش بگردد.

انجام نده

حذف و اضافه شدن آیتم‌ها بسته به وضعیت، جای بقیه را جابه‌جا می‌کند و حافظهٔ عضلانی کاربر را می‌شکند.