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

In today's video I'll show you how easy it is to create your own custom context menu using HTML, CSS & JavaScript. This one even has icons for a clean look!
Ionicons Library:
ionic.io/ionicons
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #webdev #javascript

[@isaacwhiz]

You such a genius, no fluff straight to point. Probably your courses should be nice.

[@AndreasLepsuch]

Great content. To put the id and EventListener at the list-item is better, because at the span-item the user is dependend of the length of the word - as you mentioned.

[@kerrykreiter445]

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

[@clevermissfox]

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.

[@ScriptRaccoon]

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).

[@TomasMisura]

Great video, context menu inspiration is always welcome :)

[@DarioBasset]

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?

[@Tesfamichael.G]

Your videos are very very help-full.

[@crazyingenieur3277]

Great video!

[@umbertopolanco4159]

how can I get this to overlay over a threejs scene?

[@SpaceWise616]

First view