LLMs.txt

If you’re using AI assistants or coding agents (such as Claude, ChatGPT, Cursor or GitHub Copilot) to build your application, you can point them to the Mantine ContextMenu documentation in a format they can easily read, following the LLMs.txt standard.

Two files are generated from this website’s content every time it’s published:

llms.txt - a concise overview: the most important facts about using Mantine ContextMenu, followed by links to every documentation page and example;
llms-full.txt - the complete documentation in a single file, including all code examples and the full type definitions.

How to use them

Paste https://icflorescu.github.io/mantine-contextmenu/llms-full.txt in a chat with your AI assistant and ask it to read the file before answering your questions;
Add https://icflorescu.github.io/mantine-contextmenu/llms.txt as a documentation source in your AI-powered editor (for instance, with the @Docs feature in Cursor);
Tell your coding agent to fetch https://icflorescu.github.io/mantine-contextmenu/llms-full.txt, or download the file and reference it from your project’s agent instructions (CLAUDE.md, AGENTS.md, .cursor/rules etc.).

Tip

Use llms-full.txt when your tool can handle a larger context and you want the most accurate answers; use llms.txt when your tool can follow links and fetch only the pages it needs.

What’s inside LLMs.txt

# 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

Go back

Type definitions

Up next

Mantine V6 support