New Feature: Context Menu

[Yiak]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Can we have a Context Menu component? It would be quite useful in most progressive web apps.

What type of pull request would this be?

New Feature

Any links to similar examples or other references we should review?

svelte-carbon-component has it at here, but it's hard to customize UI with tailwind.

The implementation shown in the GIF was from RadixUI:
https://www.radix-ui.com/docs/primitives/components/context-menu

[endigo9740]

That's an interesting one @Yiak, not a feature I see often in other libraries. We'll definitely take that into consideration! The only bummer is I'm assuming it might be desktop only. For mobile I'd wonder if we could do something like a tap and hold or if we just forego it altogether?

[Yiak]

Thank you for your consideration! I would say a tap-and-hold (long press) works great on mobile.

[riziles]

JSuites has a framework-agnostic implementation. Their version uses a very different approach on mobile.

[riziles]

JSuites has a framework-agnostic implementation. Their version uses a very different approach on mobile.

I tried to get the JSuites context menu working in Svelte, but it was a pain in the a**. I retract my referral. There is actually a pretty good example in the Svelte REPL Playground that works fine on mobile: https://svelte.dev/repl/3a33725c3adb4f57b46b597f9dade0c1

[endigo9740]

Thanks for giving it a try Riziles. I always worry about folks recommending stuff they haven't actually used and then running into a bunch of issues!

[endigo9740]

Just a quick note - the recent update to the Popup utility features makes use of:
https://floating-ui.com/

The documentation for this mentions it includes support for creating content-menus based on mouse clicks. We should evaluate this as our solution for this feature in the near future

[Mahmoud-zino]

Note for when implementing this component

using the event contextmenu works for Mobile (long tap) and desktop (right click) + It supports browsers' standard shortcuts like (´shift + F10`) on Firefox and Chrome out-of-the-box.

[endigo9740]

FYI, as we begin prepping for the new standalone popup package, we're consolidating all known issues for popups into this new thread:

• Integration: Floating UI React/Svelte (Popups) #1916

Your post will now be closed, but has been referenced in the post linked above. Please note that by doing this, your request is being folded into this larger effort. Please feel free to monitor the linked issue if you wish to track progress on this going forward.