# Mantine ContextMenu

> Design your Mantine applications for productivity and meet your users’ expectations by enhancing your UIs with desktop-grade context menus. `mantine-contextmenu` is a lightweight, dark-theme aware, accessible context-menu component for React applications built with Mantine (https://mantine.dev), supporting icons, colors, dividers, submenus, custom content, custom styling and RTL layouts.

Key facts:

- Mantine ContextMenu V9.x is compatible with Mantine V9.x; peer dependencies are `@mantine/core`, `@mantine/hooks`, `clsx`, `react` and `react-dom`.
- Wrap your application in `ContextMenuProvider` **inside** `MantineProvider`.
- Import `mantine-contextmenu/styles.layer.css` (or `mantine-contextmenu/styles.css`) **after** the Mantine core styles; when using `styles.layer.css`, declare `@layer mantine, mantine-contextmenu;` so Mantine core styles are applied first.
- `useContextMenu()` returns `{ showContextMenu, hideContextMenu, isContextMenuVisible }`. Since it is a hook, files using it need the `'use client'` directive in React Server Components environments (e.g. Next.js app router).
- `showContextMenu(content, options?)` does not show the menu directly: it **returns an event handler**, meant to be passed to `onContextMenu` (e.g. `onContextMenu={showContextMenu([...])}`); it can also be used as a click or touch event handler.
- `content` is either an array of item objects, or a render function `(close) => JSX.Element` for custom content.
- Each item needs a unique `key`. An item with an `onClick` handler is an action, an item with an `items` array opens a submenu, and an item with neither is rendered as a divider.
- When `title` is omitted, it is generated by "humanizing" the `key` (e.g. `copyToClipboard` → "Copy to clipboard").
- Items also accept `icon`, `iconRight`, `color` (any Mantine color), `disabled`, `hidden`, `className` and `style`.
- The menu hides when an item is clicked, when clicking outside of it, on `Escape`, and when the window is scrolled or resized; it can also be hidden imperatively with `hideContextMenu()`.
- Clicking inside custom content does not close the menu, so it can contain inputs or other interactive controls; call the `close` function received by the render callback to close it.
- Keyboard support: the menu can be opened with Shift+F10 or the context menu key, in which case its first item is focused; ArrowUp/ArrowDown/Home/End move between items, ArrowRight/Enter/Space open a submenu, ArrowLeft/Escape close it (reversed in RTL), and focus returns to the triggering element when the menu closes. Items use the `menu`, `menuitem` and `separator` ARIA roles.
- RTL layouts are supported automatically through Mantine’s `DirectionProvider`.

The complete documentation, including all code examples and type definitions, is available as a single file at https://icflorescu.github.io/mantine-contextmenu/llms-full.txt

## Docs

- [Getting started](https://icflorescu.github.io/mantine-contextmenu/getting-started/): How to install Mantine ContextMenu in your project, import its CSS styles, wrap your application in the provider and use the hook in your code
- [Styling](https://icflorescu.github.io/mantine-contextmenu/styling/): Learn how styling works in Mantine ContextMenu and how to make sure your styles are applied in the correct order
- [Type definitions](https://icflorescu.github.io/mantine-contextmenu/type-definitions/): Mantine ContextMenu is written in TypeScript and its options are well documented with additional JSDoc annotations

## Examples

- [Basic usage](https://icflorescu.github.io/mantine-contextmenu/examples/basic-usage/): basic usage of Mantine ContextMenu - just provide an array of objects describing the menu items
- [Basic configuration](https://icflorescu.github.io/mantine-contextmenu/examples/basic-configuration/): basic Mantine ContextMenu configuration - how to set the necessary props on the provider and override them in the hook-returned function
- [Action titles](https://icflorescu.github.io/mantine-contextmenu/examples/action-titles/): Mantine ContextMenu automatically generates item titles based on the action IDs, but you can provide your own if you don't like the defaults
- [Action icons](https://icflorescu.github.io/mantine-contextmenu/examples/action-icons/): how to specify icons for Mantine ContextMenu items by setting the icon properties on the actions
- [Action colors](https://icflorescu.github.io/mantine-contextmenu/examples/action-colors/): how to override the default Mantine ContextMenu item colors, if you need certain actions to stand out
- [Action dividers](https://icflorescu.github.io/mantine-contextmenu/examples/action-dividers/): how to add dividers between Mantine ContextMenu items, if you need to visually group them together
- [Conditionally disabling items](https://icflorescu.github.io/mantine-contextmenu/examples/conditionally-disabling-items/): how to conditionally disable Mantine ContextMenu items, if they're not applicable in certain situations, without hiding them
- [Conditionally hiding items](https://icflorescu.github.io/mantine-contextmenu/examples/conditionally-hiding-items/): how to conditionally hide Mantine ContextMenu items, instead of disabling them, if they're not applicable in certain situations
- [Multiple targets](https://icflorescu.github.io/mantine-contextmenu/examples/multiple-targets/): how to use the same function provided by the Mantine ContextMenu hook to show different menus for different targets
- [Custom content](https://icflorescu.github.io/mantine-contextmenu/examples/custom-content/): how to configure Mantine ContextMenu to show custom content instead of the default menu items
- [Custom styling](https://icflorescu.github.io/mantine-contextmenu/examples/custom-styling/): learn how you can customize the styling of Mantine ContextMenu by using custom class names, style objects and functions
- [Submenus](https://icflorescu.github.io/mantine-contextmenu/examples/submenus/): how to nest multiple Mantine ContextMenus to create submenus, if you need to group actions together
- [Imperative hiding](https://icflorescu.github.io/mantine-contextmenu/examples/imperative-hiding/): Mantine ContextMenu hides itself automatically when the user scrolls the page or clicks outside of it, but you can also hide it imperatively
- [RTL support](https://icflorescu.github.io/mantine-contextmenu/examples/rtl-support/): Mantine ContextMenu fully supports RTL (right-to-left) layouts with proper positioning, icon spacing, and submenu behavior

## Optional

- [Mantine V6 support](https://icflorescu.github.io/mantine-contextmenu/mantine-v6-support/): Mantine ContextMenu V7+ requires Mantine V7 or newer; if you're still using Mantine V6, please check the old documentation website
- [Contribute and support](https://icflorescu.github.io/mantine-contextmenu/contribute-and-support/): Support Mantine ContextMenu by sponsoring or hiring its author, starring the repo, reporting issues, suggesting ideas or opening pull requests
- [Changelog](https://github.com/icflorescu/mantine-contextmenu/blob/main/CHANGELOG.md): Notable changes in each Mantine ContextMenu version
- [Source code](https://github.com/icflorescu/mantine-contextmenu): GitHub repository
- [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/): Data table component for Mantine, by the same author