Mantine ContextMenu

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

However, there’s more you can do with Mantine ContextMenu.
Head over to the next example to discover other features.