[feat] Add native context menu

[axelthat]

Describe the problem

Native context menu is missing.

Describe the solution you'd like

It would be cool to have native context menu. Electron already supports this.

Alternatives considered

No response

Additional context

No response

[amrbashir]

Electron already supports this.

Can you provide a link for their API?

[axelthat]

@amrbashir https://www.electronjs.org/docs/latest/api/menu#menupopupoptions

[amrbashir]

Thank you, this API won't ship into tauri v1 and will have to wait for v2 and will need to be implemented upstream first, in muda.

[axelthat]

Gotcha, thanks!

[martpie]

Some discord discussion about context menu (a feature I'm much looking forward to use in Tauri, as it is currently a hard-blocker for my project).

Yeah it’s a feature we’re aware of, but no one had the bandwidth to work on yet. It’s also by no means a trivial feature

https://discord.com/channels/616186924390023171/731495047962558564/981896781317144648

Advantages of a context menu:

• looks native
• easy sub-menus
• can overflow out of the window
• not having to care about accessibility
• keyboard navigation out of the box
• etc

[KaKi87]

Hello,
I would like to expand this feature request to the window menu bar as well.
Thanks

[vdvman1]

@KaKi87 Window menus are already possible

[KaKi87]

Isn't this issue about the JavaScript API ?

[vdvman1]

No, it's about being able to control the native right click context menu, right now the only option is to prevent the default context menu from showing and show a custom HTML menu

[KaKi87]

Yes, but I thought this issue would be about being able to do it from the JS API (@tauri-apps/api).

[vdvman1]

The issue doesn't even mention JS
Right now there is no API in JS or in Rust to modify the native context menu

[KaKi87]

The issue mention an Electron API which is a JS one, which is why I thought what I thought. Nevermind, I'll create separate issues if necessary

[Blatman]

+1 for native context menus which would probably be a variation of the window menus already implemented.

In the meantime I'm going to try and use a JS setup which may/may not work. Main issue is getting the accelerator keys going correctly (some work on Safari but not sure about the Tauri webview at this stage) but we'll see ....

https://github.com/Blatman/Custom-Context-Menu

[Dot32Dev]

What needs to be implemented in muda? It already has custom context menu capabilities.

[dukeeagle]

Bumping this! What's the current status of this?

[martpie]

As the main blocker (muda) seems to be solved, I guess the main issue now is to come up with an API (Rust + JS?) for native menus.

Is it something we can expect for Tauri 2.0? I am not asking to get an exact deadline and I understand the amount of work the team has, but having some sense of roughly when we can expect this would be very helpful.

[FabianLars]

Very likely not for 2.0, no. We try to keep its scope reasonable small. Also i'm not sure how exactly it will work but i'd imagine it will be implemented as a plugin without many core changes so it may not even have to be coupled with a 2.X minor release.

[goenning]

I love the idea of this feature being a plugin, big +1 from me.

I'll play with muda on my Tauri app and share my progress here! If anyone else is doing the same, please share some gists 😊

[c2r0b]

I am working on a plugin for this (currently supports MacOS only): https://github.com/c2r0b/tauri-plugin-context-menu

Edit (2023-12-08): it now supports Windows, MacOS and Linux

[amrbashir]

We are aware that this feature is long overdue and we have been working on it for a while now, it is almost done and should be in the next 2.0.0-alpha release.

As this requires multiple breaking changes in our stack, it will only be targeted for v2 and won't be backported to v1 as it will require tremendous effort that we would rather spend some where else.

Now we don't want to discourage anyone from tackling this issue for v1, it is definitely possible as a plugin.

[martpie]

@amrbashir Big Kudos to the Tauri team for this. It seems the 2.0 alpha JS documentation is not complete, do you know if there is / will be some helpers to create context menus from the renderer process? Or is it a main process feature only that needs to be accessed via IPC?

[lucasfernog]

@martpie for now we only have the Rust API implemented, but soon we'll publish the JS API.

[Sahasrara]

Is there a JS/TS API still a work in progress? Any ETA (even ballpark quarter)?

[Sahasrara]

@martpie for now we only have the Rust API implemented, but soon we'll publish the JS API.

Sorry, I just saw this! Is there a separate ticket for the JS/TS api?

[samuelgozi]

I would also like to know how to use this feature, and if there are bindings for the browser.

[Mehdi-Hp]

I am kind of confused by this. If the Rust API is implemented, then where is its docs? And why tauri-plugin-context-menu is listed in Tauri@2 plugins page, when it only works with Tauri@1?

[FabianLars]

I am kind of confused by this. If the Rust API is implemented, then where is its docs?

Most v2 apis aren't properly documented yet.

And why tauri-plugin-context-menu is listed in Tauri@2 plugins page, when it only works with Tauri@1?

Ah, the headings are a bit confusing, but this section is about community plugins automatically sourced from awesome-tauri (for now).

---

api wise it's relatively simple. It's mostly re-using the existing menu apis but to show it as a context menu you use the popup method rust / js

[pronebird]

Can you folks explain how to replace the default menu that pops up on right click in webview?

[FabianLars]

I'm only at my phone rn so i can't go into details but essentially you'll need to listen to the contextmenu event in js, prevent_default it, and then show the tauri context menu.

[martpie]

I find the JS API perfect and more simple than calling it from the rust backend, you can see an example usage I have made here:

https://github.com/martpie/museeks/blob/37056d9111aa4293a1784ab4d34beb1f6a06eee5/src/components/PlaylistsNav/PlaylistsNav.tsx#L23-L58

Can you folks explain how to replace the default menu that pops up on right click in webview?

What I did was to disable only for production build, so I can still inspect elements in dev mode, as it is quite useful:

https://github.com/martpie/museeks/blob/37056d9111aa4293a1784ab4d34beb1f6a06eee5/src/components/Events/AppEvents.tsx#L18-L21

[Xiaobaishushu25]

I would like to know if this context menu supports modifying styles（such as change background color）, and if icons are only supported on Mac OS？

[martpie]

No, context menus is provided by the OS, no styling is available. The OS may display it as dark or light depending on the global theme selection.

If you need control over stylings, you may need to use a JS library to help you, but you will lose some capabilities, like the context menu getting out of the window, accessibility, etc.

[c2r0b]

I would like to know if this context menu supports modifying styles（such as change background color）, and if icons are only supported on Mac OS？

The plugin tauri-plugin-context-menu (made for Tauri v1) now allows on demand light or dark theming.
But that is for MacOS only unfortunately.

[tance77]

Hey @FabianLars

tauri-plugin-context-menu is listed on features and recipes for V2 however if you got to the Github repository it looks like it's for V1, but says Tauri V2 support Native Context menus and links back to this Github Issue. I'm a bit confused on what we should be using for Native Context Menus controlled via JS API

EDIT 1:
I did find this https://v2.tauri.app/reference/javascript/api/namespacemenu/

However it's saying only Mac OS is supported if I'm reading this right?

EDIT 2:

Native Context Menus

Here is Native Context Menus for V2 https://v2.tauri.app/reference/javascript/api/namespacemenu/

[FabianLars]

The section you linked is auto generated from awesome-tauri so i guess we should up the prio of tauri-apps/awesome-tauri#379 (also see my comment above about this i guess #4338 (comment))

However it's saying only Mac OS is supported if I'm reading this right?

Nope, that's also just badly formatted. Some menu item types, like MenuItemIcon at the top, are platform specific. The menu feature as a whole works on all (desktop) platforms.