Mantine ContextMenu

Examples › Basic configuration

The ContextMenuProvider component accepts the following props that are used as default values for the context menu container:

• zIndex: number → defaults to 9999
• shadow: MantineShadow → defaults to sm (see Mantine Paper docs)
• borderRadius: MantineSize → defaults to xs (see Mantine Paper docs)

return (
  <ContextMenuProvider zIndex={5000} shadow="md" borderRadius="md">
    {children}
  </ContextMenuProvider>
);

The zIndex value can be overridden by setting the zIndex property to the options object passed as the second argument to the showContextMenu function returned by the useContextMenu hook:

const { showContextMenu } = useContextMenu();
// ...
return (
  <Picture
    image={image}
    onContextMenu={showContextMenu(
      [
        {
          key: 'copy',
          onClick: () => copyImageToClipboard(src),
        },
        {
          key: 'download',
          onClick: () => downloadImage(src),
        },
      ],
      { zIndex: 3000 }
    )}
  />
);

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

Picture by Michael Sum

Head over to the next example to discover other features.