DEV Community

How to create a custom context menu for your web application

Richard Umoffia on February 13, 2018

Before we begin, here's a preview of what we'll be creating. Let's discuss a few use cases of a custom context menu. You wish to dis...

Read full post

Kos-M • Mar 20 '20

pretty cool post nice !
in addition if someone wants context triggered only on certain element :

window.addEventListener("contextmenu", e => {
    const origin = {
        left: e.pageX,
        top: e.pageY
    };
    var targetElement = event.target
    if (targetElement.nodeName === "TD") {
        e.preventDefault();
        console.log(targetElement)
        setPosition(origin);
    }

    return false;
});

Yannik_Sc • Mar 12 '19

The more interesting is: how to extend the existing context menu.

Custom is always bad, it hides the browser's one, looks sometimes odd, if you have a custom OS theme or something like that and it often does not behave, like you would expect it (from the normal one).
This is at least my thinking of it, and there might be more reasons why a custom context menu is bad.

Jared Richards • Jul 13 '18 • Edited

Any Advice to not make the ContextMenu not deform the Page such as Crating a Space over all content so when right clicking the page does not get deformed or not expand (Scrollbars.

Awesome Tut Thx :)

Richard Umoffia • Jul 16 '18

To achieve that Jared, you'll have to set the menu's position to fixed or absolute. I just realised I had set it to relative in the tut. Setting the position to fixed or absolute should solve that. I'm glad you enjoyed the article. Thanks 😇

Humoyun Ahmad • May 3 '19

Exactly!

Philip Karlsson • Feb 14 '18

Cool, I've always thought that it's super-complicated and that's why so few does it. I stand corrected. Thanks :)

Richard Umoffia • Feb 14 '18

I thought so too until I decided to try it. Glad you liked it.

Udochi Okeke • Mar 11 '19

This is the best explanation on this topic I have seen! Thanks!

ahmadsuleiman • May 24 '19

how to add sub list to list item?

Abishek Aasaari • Oct 16 '18

But when we click near the edge of the screen the context menu is hidden by the edge of the screen. Is there any solution for that ?

Ivan O • Nov 20 '18

Also, here is a problem with the menu if you call to at page's bottom and/or right.
setPosition should be more complex. Consider to page and menu size.

All-About-Code • Jun 9 '19

Does not work for me on Opra,Chrome, and Firefox!

Does not work!

chandan krishna • Jun 5 '19

i'm getting some problem when right button is clicked the margin at the top is extending with blank space...
So please anyone suggest solution for the problem...
email : chandan11krishna@gmail.com