Build Advanced React Context Menus with mantine-contextmenu

Context menus are a small but powerful UX pattern: a single right-click can surface actions, options, and keyboard-friendly shortcuts without cluttering the UI.
This guide shows how to install, set up, and customize mantine-contextmenu in a React app, plus practical examples for hooks, submenus, and accessibility.
Expect clear code, pragmatic advice, and just enough dry humor to keep you awake.

Why mantine-contextmenu? When to use a React context menu library

If you already use Mantine as your component system, mantine-contextmenu fits naturally: it leverages Mantine’s menu styles, theme, and keyboard behavior so your right-click menus look and behave consistently.
Use a dedicated library when you need reliable focus management, keyboard navigation, nested submenus, and integration with your app’s theme without reimplementing accessibility behaviors.

The typical use cases are file explorers, data grids, developer tools, rich editors, and any area where contextual actions reduce cognitive load.
Compared to bespoke implementations, a tested library reduces regressions—especially around edge cases like multiple monitors, touch fallback, and mobile long-press.

This guide focuses on practical setup and patterns: installation, a basic example, submenus, keyboard and hook-based patterns, and customization for your design system.
If you prefer a prose-first walkthrough, see this mantine-contextmenu tutorial for an alternate perspective: mantine-contextmenu tutorial.

Installation and basic setup

Start with a React project that already uses Mantine (optional but recommended). Install the package and any peer deps. Typical install commands:

npm install mantine-contextmenu @mantine/core @mantine/hooks
# or
yarn add mantine-contextmenu @mantine/core @mantine/hooks

Wrap your app with Mantine providers as usual so menus inherit theme and styles. A minimal root looks like:

import { MantineProvider } from '@mantine/core';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <MantineProvider withGlobalStyles withNormalizeCSS>
    <App />
  </MantineProvider>,
  document.getElementById('root')
);

Then import mantine-contextmenu components into a component where you want the right-click (context) menu. The package generally exposes a provider and a hook or components to attach context behavior.
Below is a pragmatic example to get you started quickly.

Simple example: React right-click menu

The goal: show a contextual menu on right-click over items in a list. We’ll use a contextual wrapper and render a Menu with actions. This pattern is ideal for file lists and tables.

import React from 'react';
import { Menu, MenuItem } from '@mantine/core';
import { useContextMenu, ContextMenu } from 'mantine-contextmenu';

function FileList({ files }) {
  const { openMenu, menuProps } = useContextMenu();

  return (
    <div>
      <ContextMenu {...menuProps}>
        <Menu>
          <MenuItem onClick={() => console.log('Open')}>Open</MenuItem>
          <MenuItem onClick={() => console.log('Rename')}>Rename</MenuItem>
          <MenuItem color="red" onClick={() => console.log('Delete')}>Delete</MenuItem>
        </Menu>
      </ContextMenu>

      {files.map(file => (
        <div key={file.id} onContextMenu={e => openMenu(e, { id: file.id })}>
          {file.name}
        </div>
      ))}
    </div>
  );
}

Key points: useContextMenu usually provides an openMenu handler and menuProps to wire the menu’s position and state; onContextMenu prevents the native browser menu and shows the custom one.
Pass context data (like file id) through openMenu so your menu handlers know which item is active without global state.

That pattern keeps markup simple, avoids attaching many listeners, and centralizes menu rendering for performance and focus management.
You can extend this basic example for nested components, virtualization, or portals when rendering over complex layouts.

Advanced: submenus, keyboard support, and hooks

Submenus are often where custom menus break. mantine-contextmenu (and Mantine’s Menu component) supports nested menus; manage focus and keyboard navigation by using menu items that open submenus on hover or keyboard arrow.
Implement submenus by rendering another Menu inside a MenuItem and controlling its open state.

For keyboard-first users, ensure these behaviors:
– Right arrow opens submenu, left arrow closes.
– Enter/Space activates.
– Escape closes menu.
Many libraries expose keyboard handlers; if they don’t, add onKeyDown handlers at the Menu root to handle arrow behavior and delegate focus.

Hooks are useful for state and telemetry: useContextMenu combined with a custom hook (useContextMenuActions) can centralize analytics (which action was clicked for which item) and feature flags. Keep logic declarative:

function useFileContextMenu() {
  const { openMenu, menuProps } = useContextMenu();

  function onAction(action, payload) {
    // Centralize action handling
    console.log(action, payload);
  }

  return { openMenu, menuProps, onAction };
}

Customization: theming, icons, and animation

Styling should match your app. Because mantine-contextmenu uses Mantine, you get theme tokens for spacing, colors, and fonts. Override CSS via Mantine’s styles props or by wrapping MenuItem with styled components.
Add icons for faster scanability, and use subtle motion for open/close to improve perceived responsiveness.

Example: add icons and a grouped layout for related actions. Use separators and disabled states for unavailable actions.

import { IconEdit, IconTrash } from '@tabler/icons-react';

<Menu>
  <MenuItem icon=<IconEdit size={14} />>Edit</MenuItem>
  <MenuItem icon=<IconTrash size={14} /> color="red">Delete</MenuItem>
</Menu>

For animation, prefer CSS transforms and opacity. Avoid heavy JS animations in context menus; they can delay focus and keyboard interaction. Use Mantine’s transition props where available.

Accessibility and mobile fallbacks

Accessibility matters: ensure the menu is reachable by keyboard, announces role=”menu” and menuitem roles, and that focus traps or returns to the originating element after close.
Test with a screen reader; include aria-labels for action items when text alone isn’t descriptive.

Mobile has no right-click; implement a long-press fallback. Detect touch interactions and open the same contextual menu on long-press or via a small overflow button.
Also ensure tap targets meet minimum size and that the menu positions avoid being clipped by the viewport.

Finally, handle global interactions: clicking outside or pressing Escape should close the menu, and if multiple context menus may be open (rare), centralize their state to avoid conflicts.

Performance tips and patterns

Render a single ContextMenu component at the app layer instead of per-item menus. Use context data to populate actions for the currently targeted item—this reduces DOM nodes and improves memory usage.
For long lists, combine with virtualization; only the list items are mounted, while the menu is global and positioned using coordinates provided by the onContextMenu event.

Avoid expensive computations inside onContextMenu. Keep the handler light: capture event coords and id, then open the menu. Lazily compute heavy data after the menu opens, if needed (e.g., fetching permissions).

If you show dynamic submenu content, debounce expensive operations and cache results by item id to prevent repeated work on every hover.

Integration links and resources

Official Mantine docs and components are invaluable for theming and Menu API: Mantine docs.
For a practical walkthrough and advanced examples, review this mantine-contextmenu tutorial.

If you’re shipping to production, test across browsers and input methods (mouse, keyboard, touch), and add automated accessibility checks in your CI pipeline to catch regressions.

FAQ

How do I install mantine-contextmenu in a React project?

Install via npm or yarn: npm install mantine-contextmenu @mantine/core @mantine/hooks (or yarn). Wrap your app with MantineProvider so menus inherit theme. Then import and use useContextMenu and ContextMenu per the examples above.

Can I add nested submenus and keyboard navigation?

Yes—use nested Menu components for submenus and ensure arrow keys open/close submenus. mantine-contextmenu combined with Mantine’s Menu supports nested structures; add keyboard handlers if you need custom behavior.

How do I make the context menu work on mobile?

Implement a long-press fallback or an overflow button. Detect touch events and call the same openMenu handler with coordinates. Ensure tap targets are large and test viewport positioning to avoid clipping.

Semantic core (keyword clusters)

Schema suggestion (FAQ JSON-LD)

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How do I install mantine-contextmenu in a React project?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Install via npm or yarn: npm install mantine-contextmenu @mantine/core @mantine/hooks. Wrap your app with MantineProvider, then import and use useContextMenu and ContextMenu."
      }
    },
    {
      "@type": "Question",
      "name": "Can I add nested submenus and keyboard navigation?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes. Use nested Menu components for submenus and implement arrow-key handlers to open/close submenus. Mantine's Menu API plus mantine-contextmenu supports keyboard navigation."
      }
    },
    {
      "@type": "Question",
      "name": "How do I make the context menu work on mobile?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Provide a long-press fallback or overflow button, detect touch events, and open the same menu with coordinates. Ensure touch targets are large and test positioning."
      }
    }
  ]
}

Paste the JSON-LD into the <head> of your page to provide a machine-readable FAQ that can appear as rich results in search engines.

Backlinks and further reading

For reference and a deeper walkthrough, read the community tutorial: Advanced context menus with mantine-contextmenu in React.
For API and theming details, consult the Mantine docs.