Context Menu
A menu that appears on right-click, providing contextual actions for the target element.
Right click here
'use client';
import {
ContextMenu,
ContextMenuItem,
ContextMenuPopup,
ContextMenuSeparator,
ContextMenuTrigger,
} from '@/components/ui/context-menu';
export function ContextMenuDefault() {
return (
<ContextMenu>
<ContextMenuTrigger className='flex h-32 w-64 items-center justify-center rounded-md border border-dashed'>
Right click here
</ContextMenuTrigger>
<ContextMenuPopup>
<ContextMenuItem>Back</ContextMenuItem>
<ContextMenuItem>Forward</ContextMenuItem>
<ContextMenuItem>Reload</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>Save As...</ContextMenuItem>
<ContextMenuItem>Print...</ContextMenuItem>
</ContextMenuPopup>
</ContextMenu>
);
}
Installation
Usage
import {
ContextMenu,
ContextMenuItem,
ContextMenuPopup,
ContextMenuSeparator,
ContextMenuTrigger,
} from "@/components/ui/context-menu"<ContextMenu>
<ContextMenuTrigger>Right click here</ContextMenuTrigger>
<ContextMenuPopup>
<ContextMenuItem>Back</ContextMenuItem>
<ContextMenuItem>Forward</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>Save As...</ContextMenuItem>
</ContextMenuPopup>
</ContextMenu>Examples
With Submenu
Right click here
'use client';
import {
ContextMenu,
ContextMenuItem,
ContextMenuPopup,
ContextMenuSeparator,
ContextMenuSub,
ContextMenuSubPopup,
ContextMenuSubTrigger,
ContextMenuTrigger,
} from '@/components/ui/context-menu';
export function ContextMenuWithSubmenu() {
return (
<ContextMenu>
<ContextMenuTrigger className='flex h-32 w-64 items-center justify-center rounded-md border border-dashed'>
Right click here
</ContextMenuTrigger>
<ContextMenuPopup>
<ContextMenuItem>New Tab</ContextMenuItem>
<ContextMenuItem>New Window</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuSub>
<ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
<ContextMenuSubPopup>
<ContextMenuItem>Save Page As...</ContextMenuItem>
<ContextMenuItem>Create Shortcut...</ContextMenuItem>
<ContextMenuItem>Developer Tools</ContextMenuItem>
</ContextMenuSubPopup>
</ContextMenuSub>
<ContextMenuSeparator />
<ContextMenuItem>Settings</ContextMenuItem>
</ContextMenuPopup>
</ContextMenu>
);
}