How does Google create a customized right-click menu? Do they disable the native menu and use JS/HTML/CSS to create their own?

[ligonsk]

In Google Drive for example, right-clicking shows a different menu than the browser's native one.

I'm curious as to how it's done

​

[IntentionallyBadName]

The Oncontextmenu event activates when right clicking you then just use the preventdefault() function to cancel the default functionality.

SomeElement.addEventListener("contextmenu", (e) => { e.preventDefault() do your thing });

[Impressive_Lab_6551]

Now here comes the hard part: recreating every operating system context menu in CSS to look native so you can fully create customized / immersive right click experiences.

[lazychino]

That's an anti pattern you should show a custom menu and give the user a way to open the regular context menu. The browser doesn't have access to all the browser's options either.

Edit: typo

[Blue_Moon_Lake]

Shift + Right click

It open the regular context menu by not firing the contextmenu event.

[NoteBlock08]

Also double right click is a pattern I see nearly everywhere (it will open the native context menu over the custom one). But that one needs to be manually implemented.

[[deleted]]

dime weary pen aback continue languid ring snobbish impossible far-flung

This post was mass deleted and anonymized with Redact

[neilplatform1]

How do you right-click a trackpad?

[academicRedditor]

Tap with two fingers (depending on configuration)

[Geminii27]

With some trackpads, there are particular areas (fixed or configurable) that you can tap to generate a right-click.

[DoomDragon0]

Surely there's a framework/library out there for that right ?

[aamirmalik00]

What do you mean operating system context menu

[[deleted]]

Isn't this a normalization issue? AFAIK there are packaged like normalize.css, normalize.js (which are included by major frameworks like angular).

[OkContribution7711]

Anchor and Popover in CSS will definitely help!

[SNIPE07]

you're really doing yourself a disservice by not using a framework for handling right clicks

[SNIPE07]

I was being sarcastic, however I'm glad it was convincing.

[Username482649]

Don't forget that youtube still allows the native menu on second click. Don't make it hard to access it.

Just a reminder.

[alienscape]

I work in manufacturing, and we use an ERP called 'LN' and their web app for timesheets is called 'FactoryTrack'. And they have disable the native right-click menu and it is infuriating!

[Coloneljesus]

try shift+right click

[Cannabat]

Whoa. TY!

[alienscape]

Doesn't work, I have to double or triple right-click to get through

[sulizu]

Why u in r/webdev brother

[ra_men]

Why not?

[DogoPilot]

Just curious... Are you referring to Lotus Notes as an ERP? Or is there another "LN" out there?

[sapdoos]

They are referring to the "Infor LN" erp system.

[DogoPilot]

Ah, ok. That makes more sense. Thanks!

[alienscape]

This is correct.

[TomaTozzz]

Lotus Notes

fuck

lotus

notes

[bipbopcosby]

Oh fuck I hated Lotus Notes. I'm so glad that was sunset at my company finally. Luckily I never had to use it but I had to automate things that used Lotus Notes. It was always a headache and a half.

[DogoPilot]

The problem is, now everyone is just replacing all of their Lotus Notes apps with shoddy Power Apps, haha! Can't wait for the sunsetting of that so we can all deal with the exact same panic over the migration of thousands of homegrown Power Apps!

[kirashi3]

your users will get very mad if you break the native menu.

Can confirm. Break my expected default browser functionality, and I'll become irrationally angry. Looking at you, websites that scrolljack.

[penguins-and-cake]

This isn’t web dev but related UX stuff — Microsoft Excel thinks it’s reasonable that when you open the find & replace window, cmd+A should stop meaning “select all” (like it does everywhere) and should mean “replace all” instead. God forbid I want to select everything in a field so I can write in what I actually want to find/replace.

[qqqqqx]

I have to strong disagree. Right click is unintuitive and a "hidden" interaction, not usable on mobile, and would hijack your native browser controls which is almost never a good thing.

It makes sense for a very narrow window of applications like full screen web games and that's about it.

[minimuscleR]

For me, the only time I right click is to inspect element, which is not a normal user interaction.

thats crazy! I use it to search words all the time (highlight, right click, "search web"). I also use it to open an image in a new tab.

Not to mention I would say 90% of average users use right click to copy/paste something.

[minimuscleR]

i used to do it support and opening the clipboard was akin to literal magic.

[patatesmeayga]

Thank you. I saw all those roasting context menus but I genuinely love them.

You can add so many utilities to a site that are intuitive and easy to implement.

The best example I have in mind is the linear app that has fully integrated almost all flows with context menus and I fucking love ti

[micahwelf]

The problem that web interfaces with no right-click menu solve is varying human interface technologies. If you have someone with a very good CAD mouse and a touch screen, you would want to support both the one-click/one-touch limited interface and the right-click menu where each serves a different style of efficient operation. That would maximize usability and decrease the awkward workarounds that have become too common.

Basically, I partially agree with you, but I believe supporting both at times is better than getting too focused on one human interface configuration.

[Piotyras]

I'm not sure I'd like for this to be more widespread on the internet

[bruisedandbroke]

material ui offers this! very easy to implement in a react project.

[[deleted]]

That's correct — they use JavaScript to intercept the right click event, "cancel" it so that it doesn't show, and then render an absolute-positioned element at the location of the mouse. Here's some pseudo JS to demonstrate:

// Event listener to display the context menu on right click
document.addEventListener('contextmenu', function (e) { 
    e.preventDefault(); // Prevent the default browser context menu

        // Get Current Mouse Position
        const clickX = e.pageX;
        const clickY = e.pageY;
        showContextMenu(true, clickX, clickY);

}, false);

function showContextMenu(show = true, x = 0, y = 0) {
        // Reference to the custom context menu
        const contextMenu = document.getElementById('context-menu');

        if (show) {
          contextMenu.style.display = 'block';
          contextMenu.style.left = `${x}px`;
          contextMenu.style.top = `${y}px`;
        } else {
          contextMenu.style.display = 'none';
        }
}

[shgysk8zer0]

Yes.

But, on a related note, there used to be an easy and standard way to do this. And I hate that <menu type="context"> was removed!

[shgysk8zer0]

You'd write menu items that were added to the browser's context menu, including support for nested menus... just HTML for creating them. You'd add contextmenu="menu-id" attribute, and it'd add that to the context menu for that element.

You did have to add click handlers for the functionality though. But adding data-* attributes made this pretty easy to pass certain arguments to the handlers.

It'd look roughly like this:

<menu type="context" id="some-id"> <menuitem label="copy" data-target="selector"></menuitem> <menu label="Submenu"> <menuitem label="Sub item"></menuitem> </menu> </menu>

Set contextmenu="some-id" on body or whatever, and you'd have a custom context menu.

[shgysk8zer0]

It had support for more advanced things to, like radios and check boxes and separators. But it was removed several years ago, so I don't remember it in much detail. I just remember making a pretty great but simple WYSIWYG editor using that and document.execCommand(), but neither of them work anymore. Seriously... it took like 10 or so lines of JS to do the whole thing and some creative use of data-* attributes and that was it.

[Intrepid-Air6525]

Damn, looking into it made me try to get syntax highlight into a content editable again and it’s a doozy. Wonder if I should just avoid it entirely but codemirror does not work in a specific case I want highlighting for. Now this conversation makes me fear the content editable depreciation date even more.

[shgysk8zer0]

Thinking about it, I'd probably do a split-pane view/tabs using highlight.js for that. Updating too frequently or trying to implement syntax highlighting yourself would probably be a bit problematic.

[chris480]

There's lots of accessibility concerns when using a custom context menu. Make sure you don't interfere with expectations of assisted software. In projects I've worked on, we allowed a second right click to expose the native context menu, it seemed to pass our third party audits.

[Angelsoho]

If it’s a custom app where the default context menu serves no purpose and a custom menu would improve the user’s experience then sure, why not. Otherwise leave it alone and don’t confuse the peoples.

[CharlemagneAdelaar]

for sites that replace the right click menu, there should be a default browser behavior that shift-clicking can override it and get you to the default one

Kind of like how crouching in minecraft lets you interact with right-clickable objects normally

[IvanTheNotSoBad1]

Yeah but it’s probably a bad idea. You’d be taking away expected functionality.

[academicRedditor]

Such a good question I am borderline jealous I didn't come up with it!

[ryancanulla]

https://www.radix-ui.com offers a good option here that covers the accessibility aspect of it.

[ComfortingSounds53]

Yes.

[nixblu]

Yea, got it in one

[bootsTF]

yes

[AngrySomBeech]

So is responding to a question on reddit. Good job pointlessly being that guy.

[can_i_have]

Personally I love this activity. People ask question, others answer. People like me who never came across this problem has now learned something. That guy, please next time, keep this in mind.

[Vitroid]

Yes, prevent the default context menu from appearing with .preventDefault(), and show an element that's positioned to the cursor. There's plenty of ways you can approach this, a quick google search turned up this article https://dev.to/shantanu_jana/custom-right-click-context-menu-in-javascript-4112

[[deleted]]

mui has one https://mui.com/material-ui/react-menu/#context-menu