الثيم كنز

المكوّنات

قائمة السياق

إجراءات العنصر الذي تحت المؤشر، تُفتح بالنقر بالزر الأيمن على الحاسوب وبالضغط المطوّل على اللمس، بصفوف القائمة نفسها.

Figmaالمقابل في shadcncontext-menu

المعاينة

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

التثبيت

قريبًايُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

npx ritla add context-menu

ويعمل أيضًا مع shadcn: npx shadcn@latest add @ritla/context-menu

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

التثبيت اليدوي ينسخ مصدر المكوّن إلى مشروعك. المصدر يأتي مع ترخيص Ritla UI، وأداة سطر الأوامر هي الطريق الأقصر إلى الملفات نفسها.

الاستخدام

import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger>
    Statement_Sep_2026.pdf
    {/* Also give the row a visible ⋮ button with the same actions: it is the keyboard path. */}
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem leadingIcon={PencilSimpleIcon} shortcut="F2" aria-keyshortcuts="F2">Rename</ContextMenuItem>
    <ContextMenuItem leadingIcon={TrashIcon} danger>Delete file</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

مرجع الخصائص

ContextMenu

الخاصية	النوع	الافتراضي	الوصف
`open / defaultOpen / onOpenChange`	`boolean, (open) => void`	لا يوجد	حالة الفتح، إن أردت التحكم بها.
`children`	`ReactNode`	لا يوجد	‏`ContextMenuTrigger` و`ContextMenuContent`.

ContextMenuTrigger

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	المنطقة التي تفتح القائمة: صف أو بطاقة. أبقِها خارج ترتيب التنقل بمفتاح Tab، وضع فيها زرًا ظاهرًا (⋮) يفتح الإجراءات نفسها: هذا الزر طريق لوحة المفاتيح.

ContextMenuItem

الخاصية	النوع	الافتراضي	الوصف
`children`	`ReactNode`	لا يوجد	خاصية Title: اسم الإجراء في كلمتين أو ثلاث، بصيغة المصدر («إعادة التسمية»).
`leadingIcon`	`IconComponent`	لا يوجد	خاصية Show leading: أيقونة 24 بكسل في البداية.
`shortcut`	`ReactNode`	لا يوجد	الاختصار كما يُطبع (‏⌘D)، عرضًا فقط؛ مرّر معه `aria-keyshortcuts`.
`danger`	`boolean`	لا يوجد	الإجراء الهدّام (حذف): باللون الأحمر، أخيرًا، في مجموعته.
`description`	`ReactNode`	لا يوجد	سطر ثانٍ تحت العنوان.
`onClick`	`() => void`	لا يوجد	ينفّذ الإجراء ويغلق القائمة.

ContextMenuSeparator / ContextMenuGroup / ContextMenuLabel

الخاصية	النوع	الافتراضي	الوصف
`…`	`Menu parts`	لا يوجد	خط بين المجموعات، ومجموعة، وعنوان مجموعة، كما في القائمة.

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

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

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

المفتاح	ما يفعله
`Tab`	يصل إلى زر ⋮ في الصف، لا إلى الصف نفسه.
`EnterSpace`	على زر ⋮: يفتح الإجراءات نفسها.
`ArrowDownArrowUp`	بين الإجراءات.
`Enter`	ينفّذ الإجراء.
`Escape`	يغلق القائمة ويعيد التركيز إلى الزر.

ARIA

القائمة menu وكل إجراء menuitem، واتجاهها ولغتها من المنطقة التي فُتحت منها.
لا تجعل قائمة السياق الطريق الوحيد إلى أي إجراء: اقرنها بزر ظاهر (‏⋮ في الصف) يفتح الإجراءات نفسها، لأن كثيرين لا ينقرون بالزر الأيمن ولا يصلون إليها بلوحة المفاتيح. يبقى الصف خارج ترتيب التنقل، والزر طريق لوحة المفاتيح.
الإجراء الهدّام يقول ما يفعل في اسمه («حذف الملف»)، لا باللون الأحمر وحده.

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

ينعكس

تُفتح القائمة إلى يسار المؤشر في العربية، والأيقونات على اليمين والاختصارات على اليسار.

لا ينعكس

ترتيب الإجراءات.
الاختصارات تبقى بحروفها اللاتينية من اليسار إلى اليمين (‏⌘D، F2).
أيقونات مثل التنزيل والحذف.

الأرقام: الاختصارات كما تُطبع، بلا تحويل للأرقام.
الخط العربي: الصف 48 بكسل، والعنوان label-14 بوزن Medium، والاختصار label-12 بوزن Medium على container/muted.
النص ثنائي الاتجاه: الاختصار معزول باتجاه LTR.