البناء · جديد

شريط القوائم

صف القوائم أعلى أداة مكتبية أو تطبيق ويب، مثل «ملف» و«تحرير». كل زر يفتح قائمة من صفوف القائمة.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/menubar

الاعتماديات التي يضيفها: @base-ui/react

الاستخدام

import { MenuItem, MenuSeparator } from "@/components/ui/menu";
import { Menubar, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenuItem shortcut="⌘N" aria-keyshortcuts="Meta+N">New transfer</MenuItem>
      <MenuSeparator />
      <MenuItem shortcut="⌘P" aria-keyshortcuts="Meta+P">Print</MenuItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

أمثلة

صفوف القائمة

كل صفوف القائمة متاحة: أيقونات وأوصاف وعناوين أقسام وعناصر معطلة. العنصر المعطل يبقى ويقول السبب، ليعرف الناس مكان الأمر.

مرجع الخصائص

Menubar

الخاصية	النوع	الافتراضي	الوصف
`loopFocus`	`boolean`	`true`	الأسهم تعود من آخر قائمة إلى أولها.
`modal`	`boolean`	`true`	الصفحة خلف القائمة المفتوحة لا تستجيب للمؤشر.
`disabled`	`boolean`	`false`	يعطّل الشريط كله.

MenubarTrigger

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		خاصية Label: اسم القائمة.

MenubarContent

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		صفوف القائمة: `MenuItem` و`MenuSeparator` و`MenuGroup` والقوائم الفرعية.
`align`	`"start" \| "center" \| "end"`	`"start"`	تبدأ من بداية الزر (يمينه بالعربية).
`sideOffset / alignOffset`	`number`	`9 / -5`	‏4px تحت الشريط، وأول قائمة على حافته.

MenuItem

الخاصية	النوع	الافتراضي	الوصف
`shortcut`	`ReactNode`		الاختصار كما يُطبع (`⌘N`)، للعرض فقط.
`aria-keyshortcuts`	`string`		الاختصار لقارئ الشاشة (`Meta+N`). التطبيق يتولى المفاتيح.

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`ArrowRightArrowLeft`	بين القوائم، ومع قائمة مفتوحة تفتح التالية.
`ArrowDownEnterSpace`	يفتح القائمة وينقل التركيز إلى أول عنصر.
`ArrowUpArrowDown`	بين عناصر القائمة المفتوحة.
`Esc`	يغلق القائمة ويعيد التركيز إلى زرها.

ARIA

الشريط role="menubar" وكل زر menuitem له aria-haspopup وaria-expanded.
زر واحد فقط في ترتيب Tab، والأسهم تتنقل بين الباقي.
رموز الاختصار مخفية عن قارئ الشاشة، وaria-keyshortcuts تقولها بكلمات.
الأزرار ارتفاعها 28px ومنطقة لمسها 48px عموديًا فقط، كي لا يأخذ زر نقرات جاره.

ملاحظات العربية والاتجاه

ينعكس

أول قائمة على اليمين، والقوائم تبدأ من الحافة اليمنى لزرها.
السهم الأيسر ينتقل إلى القائمة التالية بالعربية.
الاختصارات في نهاية الصف: على اليسار. والقوائم الفرعية تنفتح إلى اليسار.

لا ينعكس

الاختصارات تُقرأ من اليسار إلى اليمين (⇧⌘E).
الأيقونات غير الاتجاهية (الملفات والقفل) لا تنعكس.

الأرقام: الأرقام في العناصر تتبع إعداد الأرقام؛ مفاتيح الاختصار تبقى كما على لوحة المفاتيح.
الخط العربي: الأزرار label-14 Medium، والعناصر كصفوف القائمة، والاختصار label-12 Medium.
النص ثنائي الاتجاه: الاختصار <kbd dir="ltr"> فلا ينقلب ترتيب ⇧⌘E داخل صف عربي. الشاشات الصغيرة: انقل الأوامر إلى قائمة «المزيد» أو درج.

كل المكونات ›