Mantine ContextMenu

Source code18.8k/monthSponsor

Getting started

Mantine ContextMenu depends on @mantine/core, @mantine/hooks and clsx.

Create a new application with Mantine, install mantine-contextmenu and make sure you have the clsx dependency installed as well:

yarn add mantine-contextmenu clsx

Wrap your application in a ContextMenuProvider inside the MantineProvider and don’t forget to import the necessary CSS files in the correct order.

For example, if you’re using a Next.js application with an app router, your layout.tsx could look like this:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';
import { ContextMenuProvider } from 'mantine-contextmenu';

import '@mantine/core/styles.layer.css';
import 'mantine-contextmenu/styles.layer.css';
import './layout.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>
        <MantineProvider defaultColorScheme="auto">
          <ContextMenuProvider>{children}</ContextMenuProvider>
        </MantineProvider>
      </body>
    </html>
  );
}

Use the hook in your code

Import the useContextMenu hook and use it in your components like so:

'use client';
// 👆 Since 'useContextMenu' is a hook, don't forget to add the 'use client' directive
//    at the top of your file if you're using it in a RSC context

import { useContextMenu } from 'mantine-contextmenu';
// other imports...

export function SimpleExample() {
  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 device',
          onClick: () => downloadImage(src),
        },
      ])}
    />
  );
}

The above code will produce the following result (right-click on the image, or long-tap on mobile devices, to trigger the context menu):

Picture by Daria Shatova | Mantine ContextMenu

Picture by Daria Shatova

Next, let’s make sure you have a good understanding of how styling works before browsing the usage examples and taking a look at the type definitions page.