Mantine ContextMenu

Source code18.8k/monthSponsor

Examples › Conditionally disabling items

You can conditionally disable a menu item by setting its disabled property to true:

const { showContextMenu } = useContextMenu();
// ...
return (
  <Picture
    image={image}
    onContextMenu={showContextMenu([
      {
        key: 'copy',
        onClick: () => copyImageToClipboard(src),
      },
      {
        key: 'download',
        // 👇 this item is disabled; the `onClick` will not be called
        disabled: true,
        onClick: () => downloadImage(src),
      },
    ])}
  />
);

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

Picture by Lloyd Henneman | Mantine ContextMenu

Picture by Lloyd Henneman

Head over to the next example to learn how you could conditionally hide a menu item instead of disabling it.