How to Create Your Own Context Menu with Icons Using HTML, CSS & JavaScript

Great content! Gotta tell you, it’s so so hard to find frontEnd videos that even mention accessibility or implement it into the markup , they are extremely few and far bw. I bet if you started including some best practices for accessibility on your projects with interaction and mentioned “how to create an accessible X” it would help drive users to you looking for help implementing a11y. Accordions and drop downs are about the only videos I can find mention of accessibility.

On a website you should never, never, never override the default behavior of the context menu and other standard actions. This is a bad UX and will also make your website inaccessible. You literally disable their actions. When you want to have a custom context menu, you can for example offer a shortcut for that, and explain that shortcut as well. Keep the regular one. Alternatively, just place a button somewhere that opens the menu (can always be at a fixed position then, which also simplifies things). The button also has the advantage of being accessible via keyboard then. You can even use the new popover API for displaying the menu without any JavaScript by the way.
JavaScript allows us to do many things, but not all of them are good for the user.
I am not against showing this technique of a custom context menu in a video, but it should at least mention its limitations and specific use cases (say, desktop apps developed via JavaScript / Electron).

Your videos are very very help-full.

Very slick and super useful! Loved the font-size using em refresher. Always enjoy the bonus content!!

Great video, context menu inspiration is always welcome :)

Great video!

Hi Dom. I would be interested to know you development strategy for the future. I mean, could you tell us what kind of language and libraries or frameworks would you use to start a medium to large project by yourself or in team? Web components? Svelte? And the server part?

Can you make a video on that?

First view