Mantine ContextMenu

Source code18.8k/monthSponsor

Examples › Action titles

If you’re not happy with the titles that are generated automatically based on the action keys, you can provide your own, like so:

const { showContextMenu } = useContextMenu();
// ...
return (
  <Picture
    image={image}
    onContextMenu={showContextMenu([
      {
        key: 'copy',
        title: 'Copy image to clipboard',
        onClick: () => copyImageToClipboard(src),
      },
      {
        key: 'download',
        title: 'Download image to your computer',
        onClick: () => downloadImage(src),
      },
    ])}
  />
);

Right-click on the image to trigger the context menu:

Picture by Zeke Tucker | Mantine ContextMenu

Picture by Zeke Tucker

Head over to the next example to discover other features.