Right click hereLong press here
import { Pressable } from "react-aria-components"
import {
ContextMenu,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenuTrigger>
<Pressable>
<div role="button">Right click here</div>
</Pressable>
<ContextMenu>
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenu>
</ContextMenuTrigger>
Use the following composition to build a ContextMenu:
ContextMenuTrigger
├── Pressable
└── ContextMenuContent
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ ├── ContextMenuItem
│ └── ContextMenuItem
├── ContextMenuSeparator
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ ├── ContextMenuItem
│ └── ContextMenuItem
└── ContextMenuSub
├── ContextMenuSubTrigger
└── ContextMenuSubContent
└── ContextMenuGroup
├── ContextMenuItem
└── ContextMenuItem
A simple context menu with a few actions.
Right click hereLong press here
Use ContextMenuSub to nest secondary actions.
Right click hereLong press here
Add ContextMenuShortcut to show keyboard hints.
Right click hereLong press here
Group related actions and separate them with dividers.
Right click hereLong press here
Combine icons with labels for quick scanning.
Right click hereLong press here
Use selectionMode="multiple" for toggles.
Right click hereLong press here
Use selectionMode="single" for exclusive choices.
Right click hereLong press here
Use variant="destructive" to style the menu item as destructive.
Right click hereLong press here
Control submenu placement with the placement prop.
Right click (top)Long press (top)
Right click (right)Long press (right)
Right click (bottom)Long press (bottom)
Right click (left)Long press (left)
To enable RTL support, see the RTL configuration guide.
انقر بزر الماوس الأيمن هنااضغط مطولاً هنا
Use placement="end" to place the menu on the logical end side of the trigger.
<ContextMenuTrigger>
<Pressable>
<div role="button">Right click here</div>
</Pressable>
<ContextMenu placement="end">
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenu>
</ContextMenuTrigger>
See the React Aria documentation for more information.