البناء · جديد

زر القائمة

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

المعاينة

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

التثبيت

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

npx shadcn@latest add @ritla/menu

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

الاستخدام

import { DotsThreeVerticalIcon, PencilSimpleIcon } from "@phosphor-icons/react/ssr";
import { IconButton } from "@/components/ui/icon-button";
import { Menu, MenuContent, MenuItem, MenuTrigger } from "@/components/ui/menu";

<Menu>
  <MenuTrigger render={<IconButton variant="outline" icon={DotsThreeVerticalIcon} label="Invoice actions" />} />
  <MenuContent>
    <MenuItem leadingIcon={PencilSimpleIcon} onClick={edit}>Edit</MenuItem>
    <MenuItem onClick={duplicate}>Duplicate</MenuItem>
  </MenuContent>
</Menu>

أمثلة

زر منقسم

نوع Button في Figma: نصف القائمة في الزر المنقسم يفتح القائمة نفسها، وتصطف القائمة مع الزر كله.

الأقسام والفواصل

MenuGroup مع MenuLabel يسمّي كل قسم، وMenuSeparator بين الأقسام. description يضيف سطراً ثانياً، وMenuLinkItem للتنقل، والعنصر المعطّل يبقى ظاهراً مع سببه.

قائمة فرعية

نوع Multi level: «نقل إلى» يفتح قائمة فرعية عند نهاية السطر. في العربية تفتح إلى اليسار، والسهم الأيسر يفتحها والأيمن يغلقها.

مرجع الخصائص

الخاصية	النوع	الافتراضي	الوصف
`open / defaultOpen`	`boolean`		فتح القائمة (متحكَّم به أو لا).
`onOpenChange`	`(open: boolean) => void`		يُستدعى عند الفتح والإغلاق.
`disabled`	`boolean`	`false`	يعطّل الزر والقائمة.

MenuTrigger

الخاصية	النوع	الافتراضي	الوصف
`render`	`ReactElement`		الزر الظاهر: `<IconButton … />` أو `<Button … />`. يأخذ `aria-haspopup` و`aria-expanded`.

MenuContent

الخاصية	النوع	الافتراضي	الوصف
`align`	`"start" \| "center" \| "end"`	`"start"`	المحاذاة مع الزر؛ في Figma عند بداية السطر.
`sideOffset`	`number`	`12`	المسافة تحت الزر بالبكسل.
`anchor`	`"trigger" \| "parent"`	`"trigger"`	ما تصطف معه القائمة؛ `parent` للزر المنقسم كله.

MenuItem, MenuLinkItem, MenuSubmenuTrigger

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`		العنوان (Title).
`leadingIcon`	`IconComponent`		Show leading: أيقونة 24 بكسل في بداية السطر.
`description`	`ReactNode`		Show description: سطر ثانٍ تحت العنوان.
`onClick`	`(event) => void`		`MenuItem`: يُستدعى عند الاختيار ثم تُغلق القائمة.
`href`	`string`		`MenuLinkItem`: وجهة الرابط.
`disabled`	`boolean`	`false`	State = Disabled؛ يبقى ظاهراً ويتلقى التركيز ولا يُنفَّذ. اكتب السبب في `description`.

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

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

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

المفتاح	ما يفعله
`EnterSpaceArrowDown`	على الزر: يفتح القائمة ويركّز العنصر الأول.
`ArrowDownArrowUp`	ينتقل بين العناصر ويلتف عند الطرفين. العنصر المعطّل يتلقى التركيز ليُقرأ سببه، لكنه لا يُنفَّذ.
`ArrowRightArrowLeft`	يفتح القائمة الفرعية ويغلقها. في العربية ينعكس: السهم الأيسر يفتح.
`Enter`	ينفّذ العنصر المركّز ويغلق القائمة.
`Escape`	يغلق القائمة ويعيد التركيز إلى الزر.

ARIA

الزر يحمل aria-haspopup="menu" وaria-expanded، والقائمة role="menu" وعناصرها menuitem.
زر الأيقونة يحتاج label يصف ما تحويه القائمة («إجراءات الفاتورة»)، لا «المزيد».
MenuLabel يسمّي مجموعته، فتعلن قارئات الشاشة اسم القسم.

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

ينعكس

القائمة تفتح عند بداية الزر (اليمين في العربية)، والقوائم الفرعية نحو نهاية السطر (اليسار).
سهم القائمة الفرعية CaretRight ينعكس، والأسهم على لوحة المفاتيح تتبع اتجاه القراءة.
القائمة تأخذ اتجاه الزر ولغته، حتى داخل جزيرة عربية في صفحة إنجليزية.

لا ينعكس

DotsThreeVertical والأيقونات غير الاتجاهية لا تنعكس.

الأرقام: الأعداد في الأسطر الثانية («8 أعضاء») تُنسّق بـformatNumber؛ المعرّفات («INV-1042») في <bdi dir="ltr"> ولا تتغير.
الخط العربي: العنوان label-14 بوزن Medium، والسطر الثاني label-12، وعنوان القسم body-14 Semibold. الصفوف 48 بكسل وتتسع للعربية.
النص ثنائي الاتجاه: اسم لاتيني في نهاية عنصر عربي («تنزيل PDF») يُعرض صحيحاً؛ في وسطه ضعه في <bdi>.

كل المكونات ›