Tauri v1 Plugin Context Menu

A Tauri plugin to display native context menu in Tauri v1.x.
The Tauri API v1 does not support native context menu out of the box, so this plugin is created to fill the gap.

⚠️ Maintenance Mode with Community Contributions ⚠️

Tauri v2 has been released and it supports creating native context menu without plugins (here the docs).

Bug fixes will still be implemented for this plugin.
New features will not be developed by the main maintainer, but PRs from the community are still welcome.

Support

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.

This project provides a typescript utility to simplify the usage of the plugin. Run the following to install the JavaScript/TypeScript package:

 npm i tauri-plugin-context-menu

Examples

Check out the examples directory for sample usages.

A vanilla JS example is provided in examples/vanilla.
After npm install, to run the example use the following command:

npm run examples/vanilla

A typescript example using the utility package is provided in examples/ts-utility. You can run it with the same command as above (replace examples/vanilla with examples/ts-utility).

Sample Usage

Without the JS/TS Package

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", (event) => {
    alert(event.payload);
});

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",
                payload: "Hello World!",
                shortcut: "ctrl+M",
                icon: {
                    path: iconUrl
                },
                subitems: [
                    {
                        label: "Subitem 1",
                        disabled: true,
                        event: "subitem1clicked",
                    },
                    {
                        is_separator: true,
                    },
                    {
                        label: "Subitem 2",
                        disabled: false,
                        checked: true,
                        event: "subitem2clicked",
                    }
                ]
            }
        ],
    });
});

With the JS/TS Package

import { showMenu } from "tauri-plugin-context-menu";

showMenu({ 
    pos: {...}, // Position of the menu (see below for options)
    theme: "light", // Theme of the menu
    items: [
        ...,
        {
            ..., // Menu item (see below for options)
            event: () => {
                // Do something
            }
        }
    ]
});

You can also use it to respond to window events with the onEventShowMenu function:

import { onEventShowMenu } from "tauri-plugin-context-menu";
onEventShowMenu("contextmenu", (e) => ({ /* menuOptions */ }));

Options

MenuItem

MenuItemIcon

Position

Modifier Keys

Modifier keys can be used in the shortcut option of a menu item to display the corresponding symbol (⌘, ⌃, ⌥, ⇧).

On MacOS this also makes the shortcut work when the modifier key is pressed (since it is handled by default by the OS).

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");
});