Switch theme

Examples › Basic usage

In its most basic usage scenario, the showContextMenu function only requires you to provide an array of objects describing the menu items.
Each object in the array must have two properties: a unique key and an onClick handler.
For each item, a title will be automatically generated by “humanizing” the key value.
The onClick handler will be called when the user clicks on the corresponding menu item.
const showContextMenu = useContextMenu();
// ...
return (
<Picture
image={image}
onContextMenu={showContextMenu([
{
key: 'copy',
onClick: () => copyImageToClipboard(src),
},
{
key: 'download',
onClick: () => downloadImage(src),
},
])}
/>
);
Right-click on the image to trigger the context menu:
Picture by Lloyd Henneman | Mantine ContextMenu
Picture by Lloyd Henneman
However, there’s more you can do with Mantine ContextMenu.
Head over to the next example to discover other features.
MIT LicenseSponsor the author
Built by Ionut-Cristian Florescu, the author of Mantine DataTable.
Please sponsor my work if you find it useful.
GitHub StarsNPM Downloads