[feat] Add native context menu
axelthat opened this issue · 41 comments
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
Electron already supports this.
Can you provide a link for their API?
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.
Gotcha, thanks!
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
- looks native
- easy sub-menus
- can overflow out of the window
- not having to care about accessibility
- keyboard navigation out of the box
- etc
Hello,
I would like to expand this feature request to the window menu bar as well.
Thanks
@KaKi87 Window menus are already possible
Isn't this issue about the JavaScript API ?
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
Yes, but I thought this issue would be about being able to do it from the JS API (@tauri-apps/api).
The issue doesn't even mention JS
Right now there is no API in JS or in Rust to modify the native context menu
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
+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 ....
What needs to be implemented in muda? It already has custom context menu capabilities.
Bumping this! What's the current status of this?
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.
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.
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 😊
muda will need to be added in tauri core not as a plugin, as it requires a bit more setup.
@amrbashir can I use it currently on 1.3 if I add it myself as a dependency or does it need something into Tauri core before I can use it?
Well, you probably can, but accelerators won't work on Windows (but it is already broken in tauri because of a webview2 bug)
I really want this feature. Enough to have put out a $1500 bounty for its completion, in fact! (Full disclosure: I think BountySource takes a cut from the bounty hunter of 10%, so I think you'd walk away with $1350.) I have paid out a previous bounty of a similar amount, so I have a reputable history.
I will pay out when there is a merged PR for native context menus that fulfills the following acceptance criteria:
- Submenus
- Keyboard navigation
- Hotkey bindings
- Hotkey hints (see the screenshot in the original post: the grey text to the right of each option indicating the hotkey)
- Overflowing outside of the application's windows
- A sensible and safe API
- Anything else you'd expect from a native context menu (disappears when you click away, disappear when you press ESC (maybe), etc.)
If you are not an admin of this project, be warned that admins may elect not to accept your PR, in which case, this reward will not be paid out.
https://app.bountysource.com/issues/122317270-feat-add-native-context-menu
Good luck!
First pay me something, then i do the bounty. It will take some time since im not avid with Rust. Oh i was not knowing about bountysource problem, so yeah, payme at least 35% and the rest when i finish. Are you just downvote and not say why?
@AgCaliva , an admin/maintainer could ask for such terms, not a random developer.
If you have to ask "Why?" now, then you should gain experience first.
(btw: @bountysource has still not payed out, get your money back via paypal if you have funded a bounty)
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
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.
@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?
@martpie for now we only have the Rust API implemented, but soon we'll publish the JS API.
Is there a JS/TS API still a work in progress? Any ETA (even ballpark quarter)?
@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?
I would also like to know how to use this feature, and if there are bindings for the browser.
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?
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
Can you folks explain how to replace the default menu that pops up on right click in webview?
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.
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:
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:
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？
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.
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.