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)
• repositionOnRepeat: boolean → defaults to false
  Whether to reposition the context menu when the triggering event repeats.
  If set to true, the context menu will reposition itself to the position of the triggering event.
  If unset or set to false, the context menu will hide automatically when the triggering event repeats.

return (
  <ContextMenuProvider zIndex={5000} shadow="md" borderRadius="md" repositionOnRepeat>
    {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.