Right click hereLong press here
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
<ContextMenuTrigger>Right click here</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
Use the following composition to build a ContextMenu:
ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ ├── ContextMenuItem
│ └── ContextMenuItem
├── ContextMenuSeparator
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ ├── ContextMenuCheckboxItem
│ └── ContextMenuCheckboxItem
├── ContextMenuSeparator
├── ContextMenuGroup
│ ├── ContextMenuLabel
│ └── ContextMenuRadioGroup
│ ├── ContextMenuRadioItem
│ └── ContextMenuRadioItem
└── 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 ContextMenuCheckboxItem for toggles.
Right click hereLong press here
Use ContextMenuRadioItem 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 side and align props.
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 side="inline-end" to place the menu on the logical right side of the trigger.
<ContextMenu>
<ContextMenuTrigger>Right click here</ContextMenuTrigger>
<ContextMenuContent side="inline-end">
<ContextMenuItem>Profile</ContextMenuItem>
<ContextMenuItem>Billing</ContextMenuItem>
<ContextMenuItem>Team</ContextMenuItem>
<ContextMenuItem>Subscription</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
See the Base UI documentation for more information.