Getting started

If you’re using Next.js, Vite, Create React App, Remix or Gatsby, make sure to have a look at Getting started with Mantine page.

Mantine ContextMenu V6 depends on @mantine/core@6 and @mantine/hooks@6.
Mantine also depends on @emotion/react (and @emotion/server when used with SSR frameworks).

Mantine ContextMenu V6 supports Mantine V6.
Mantine V7 support is on the roadmap. You can help speed up the process by sponsoring me on GitHub.

Install the package and its dependencies:

yarn add @mantine/core@6 @mantine/hooks@6 @emotion/react mantine-contextmenu@6

pnpm i @mantine/core@6 @mantine/hooks@6 @emotion/react mantine-contextmenu@6

npm i @mantine/core@6 @mantine/hooks@6 @emotion/react mantine-contextmenu@6

If you are using Next.js, you also need to install @mantine/next and @emotion/server and make sure to follow the Mantine usage with Next.js guide.

Wrap your application with the ContextMenuProvider component.
Make sure to place the ContextMenuProvider below MantineProvider.

For example, if you are using Next.js, you can wrap your application in _app.tsx file like so:

<MantineProvider>
  <ContextMenuProvider>
    <Component {...pageProps} />
  </ContextMenuProvider>
</MantineProvider>

Then you can import the useContextMenu hook and use it in your components like so:

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

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

Picture by Daria Shatova

Browse the code examples to see the context menu in action and learn how to use it, and refer to the type definitions page for the exhaustive list of customizable options.

Go back

Home

Up next

Examples › Basic usage

Built by Ionut-Cristian Florescu, the author of Mantine DataTable.
Please sponsor my work if you find it useful.