Dynamic Context Menu With Custom Icons – custoMenu

Category: Javascript , Menu & Navigation | December 17, 2018
Author: TheRolfFR
Views Total: 716 views
Official Page: Go to website
Last Update: December 17, 2018
License: MIT


Dynamic Context Menu With Custom Icons – custoMenu


A dynamic, customizable context menu built with jQuery that can be attached to any container element, with support for custom icons, descriptions and click functions.

How to use it:

Import the stylesheet custoMenu.css and JavaScript custoMenu.js into the document.

<link rel="stylesheet" href="custoMenu.css">
<script src="custoMenu.js"></script>

Load an icon set of your choice for the menu icons.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Create menu items with custom icons and descriptions in the JavaScript as follows:

var filectxmenu = {
    name: 'file',
    items: {
      'openfile' : {
        text: '<i class="material-icons">&#xE254;</i>',
        desc: 'Open',
        func: function() {
      'downloadfile' : {
        text: '<i class="material-icons">&#xE2C4;</i>',
        desc: 'Download'
      'copy' : {
        text: '<i class="material-icons">&#xE14D;</i>'
      'cut' : {
        text: '<i class="material-icons">&#xE14E;</i>'
      'delete' : {
        text: '<i class="material-icons">&#xE872;</i>'
      'rename' : {
        text: '<i class="material-icons">&#xE22B;</i>'

Initialize the context menu.

document.addEventListener('DOMContentLoaded', function(){

Attach the context menu to an element you specify.

<div class="custoMe" 
     Right Click Me

You Might Be Interested In:

Leave a Reply