Tauri Plugin Context Menu

A Tauri plugin to display native context menu. The default Tauri API does not support context menu, so this plugin is created to fill the gap.

Screenshot

Support

	Windows	MacOS	Linux
Fully supported	✅	✅	🔜

Installation

Crate: https://crates.io/crates/tauri-plugin-context-menu

cargo add tauri-plugin-context-menu to add the package.

Or add the following to your Cargo.toml for the latest unpublished version (not recommanded).

tauri-plugin-context-menu = { git = "https://github.com/c2r0b/tauri-plugin-context-menu", branch = "main" }

See "Using a Plugin" Tauri official guide to initialize the plugin.

Run Example

A vanilla JS example is provided in examples/vanilla. To run the example, run the following commands:

cd examples/vanilla
npm run tauri dev

Sample Usage

import { invoke } from "@tauri-apps/api";
import { listen } from "@tauri-apps/api/event";
import { resolveResource } from "@tauri-apps/api/path";

// Listen to the event emitted when the first menu item is clicked
listen("item1clicked", () => {
    alert("item 1 clicked");
});

window.addEventListener("contextmenu", async (e) => {
    e.preventDefault();
    const iconUrl = await resolveResource('assets/16x16.png');

    // Show the context menu
    invoke("plugin:context_menu|show_context_menu", {
        items: [
            {
                label: "Item 1",
                disabled: false,
                event: "item1clicked",
                shortcut: "ctrl+M",
                icon: {
                    path: iconUrl
                },
                subitems: [
                    {
                        label: "Subitem 1",
                        disabled: true,
                        event: "subitem1clicked",
                    },
                    {
                        is_separator: true,
                    },
                    {
                        label: "Subitem 2",
                        disabled: false,
                        event: "subitem2clicked",
                    }
                ]
            }
        ],
    });
});

Options

List of options that can be passed to the plugin.

Option	Type	Description
items	`MenuItem[]`	List of menu items to be displayed.
pos	`Position`	Position of the menu. Defaults to the cursor position.

MenuItem

Option	Type	Optional	Default	Description
label	`string`			Displayed test of the menu item.
disabled	`boolean`	`optional`	`false`	Whether the menu item is disabled.
event	`string`	`optional`		Event name to be emitted when the menu item is clicked.
subitems	`MenuItem[]`	`optional`	`[]`	List of sub menu items to be displayed.
shortcut	`string`	`optional`		Keyboard shortcut displayed on the right.
icon	`MenuItemIcon`	`optional`		Icon to be displayed on the left.
is_separator	`boolean`	`optional`	`false`	Whether the menu item is a separator.

MenuItemIcon

Option	Type	Optional	Default	Description
path	`string`			Absolute path to the icon file.
width	`number`	`optional`	`16`	Width of the icon.
height	`number`	`optional`	`16`	Height of the icon.

Position

Position coordinates must be relative to the currently active window when is_absolute is set to false.

Option	Type	Optional	Default	Description
x	`number`			X position of the menu.
y	`number`			Y position of the menu.
is_absolute	`boolean`	`optional`	`false`	Is the position absolute to the screen.

Events

Item Clicked

Emitted when a menu item is clicked. The event name is the same as the event option of the menu item:

import { listen } from "@tauri-apps/api/event";
import { invoke } from "@tauri-apps/api";

listen("[EVENTNAME]", () => {
    alert("menu item clicked");
});

invoke(...{
    items: [{
        ...
        event: "[EVENTNAME]",
        ...
    }]
});

Menu Did Close

Emitted when the menu is closed. This event is emitted regardless of whether the menu is closed by clicking on a menu item or by clicking outside the menu.
You can catch this event using the following code:

import { listen } from "@tauri-apps/api/event";

listen("menu-did-close", () => {
    alert("menu closed");
});

tauri-plugin-context-menu 0.4.0