Mantine ContextMenu

Source code17.7k/monthSponsor

Examples › Action colors

You can specify action colors for the context menu items, like so:

const { showContextMenu } = useContextMenu();
// ...
return (
  <Picture
    image={image}
    onContextMenu={showContextMenu([
      {
        key: 'copy',
        icon: <IconCopy size={16} />,
        onClick: () => copyImageToClipboard(src),
      },
      {
        key: 'download',
        color: '#ff00ff',
        icon: <IconDownload size={16} />,
        onClick: () => downloadImage(src),
      },
      {
        key: 'delete',
        color: 'red',
        icon: <IconTrash size={16} />,
        onClick: handleDelete,
      },
    ])}
  />
);

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

Picture by Andriyko Podilnyk | Mantine ContextMenu

Picture by Andriyko Podilnyk

Head over to the next example to discover other features.