{"id":19901007,"url":"https://github.com/m-thalmann/contextmenujs","last_synced_at":"2025-10-16T18:23:06.079Z","repository":{"id":50086160,"uuid":"138587201","full_name":"m-thalmann/contextmenujs","owner":"m-thalmann","description":"A simple JavaScript library, to display custom contextmenus (right-click)","archived":false,"fork":false,"pushed_at":"2020-10-02T11:46:54.000Z","size":54,"stargazers_count":24,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-10T12:56:24.455Z","etag":null,"topics":["contextmenu","javascript","right-click","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://m-thalmann.github.io/contextmenujs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m-thalmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-25T11:42:23.000Z","updated_at":"2022-10-16T03:02:02.000Z","dependencies_parsed_at":"2022-09-15T05:23:14.152Z","dependency_job_id":null,"html_url":"https://github.com/m-thalmann/contextmenujs","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Fcontextmenujs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Fcontextmenujs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Fcontextmenujs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thalmann%2Fcontextmenujs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-thalmann","download_url":"https://codeload.github.com/m-thalmann/contextmenujs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224341324,"owners_count":17295271,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["contextmenu","javascript","right-click","vanilla-javascript"],"created_at":"2024-11-12T20:13:51.885Z","updated_at":"2025-10-16T18:23:06.020Z","avatar_url":"https://github.com/m-thalmann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ContextmenuJS\n\nContextmenuJS is a simple JavaScript library, to display custom contextmenus (right-click).\n\n**Demo:** https://m-thalmann.github.io/contextmenujs/\n\n## Navigation\n- [Installation](#installation)\n- [Usage](#usage)\n- [Documentation](#documentation)\n  - [ContextMenu](#contextmenu)\n  - [Menu structure](#menu-structure)\n  - [ContextUtil](#contextutil)\n  - [Options](#options)\n- [Example](#example)\n\n## Installation\n1. Download the .zip-File and put it in your project-folder.\n\n2. Add this script-tag to the head of the file\n```html\n\u003cscript src=\"path/to/js/file.js\"\u003e\u003c/script\u003e\n```\n\n3. Add this link-tag to the head of the file, to include the styles\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/css/file.css\" /\u003e\n```\n\n4. Start using the library!\n\n## Usage\n### Create menu structure\n```javascript\nvar menuitems = [\n  {\n    \"text\": \"Item 1\",\n    \"icon\": \"\u0026#9819;\",\n    \"sub\": [\n      {\n        \"text\": \"Item 1.1\",\n        \"enabled\": false\n      }\n    ]\n  },\n  {\n    \"text\": \"Item 2\"\n  }\n];\n```\n\n### Create new contextmenu\n```javascript\nvar menu = new ContextMenu(menuitems);\n```\n\n### Append contextmenu to listener\n```javascript\ndocument.addEventListener(\"contextmenu\", function(e){\n  menu.display(e);\n});\n```\n\n### (Re-)load the contextmenu\n```javascript\nmenu.reload(); // Always use this, when you change the menu\n```\n## Documentation\n### Contextmenu\nIt's the main object to display the contextmenu\n#### Instanciating\n```javascript\nnew ContextMenu(menu_structure, options);\n```\n- **menu_structure** (Array): This array contains all items of the menu (see [below](#menu-structure))\n- **options** (object): A object with options for the contextmenu (see [below](#options)) **(optional)**\n\nAfter the instanciation, the contextmenu is reloaded/rendered, but not shown\n\n#### Methods\n```javascript\nmenu.reload();                    // Reloads/Renders the contextmenu inside of a container (id: cm_\u003cnum\u003e)\nmenu.display(e, target);          // Displays the contextmenu on the location present in the contextmenu-event (e)\n                                  // and executes e.preventDefault();\n                                  // if target is set, the contextTarget is set to that\nmenu.hide();                      // Hides the menu, if shown\n                            \nmenu.setOptions(options);         // Resets the options (object)\nmenu.changeOption(option, value); // Changes one option (string, object)\nmenu.getOptions();                // Returns the options\n```\n\n#### Properties (variables)\n```javascript\nmenu.menu                         // The menu structure; change this, or the parameter, to change the menu (no setter)\nmenu.contextTarget                // The target, where the contextmenu was last opened\n\nContextMenu.count                 // Number of contextmenus created (for the id's)\nContextMenu.DIVIDER               // Constant, that is used to mark a item as a divider (\"type\": ContextMenu.DIVIDER)\n```\n\n### Menu structure\nIt's only a guideline, to define a menu (no object etc.)\n\n```javascript\nvar menustructure = [\n  {\n    \"text\": \"Item1\",                         // Text to display\n    \"icon\": '\u003cimg src=\"images/item.png\" /\u003e', // Icon to display next to the text\n    \"sub\": [                                 // Item has nested items\n      {\n        \"text\": \"Item1.1\",\n        \"enabled\": false                     // Item is disabled (if it has nested items, they won't show)\n      }\n    ]\n  },\n  {\n    \"type\": ContextMenu.DIVIDER              // This item is a divider (shows only gray line, no text etc.)\n  },\n  {\n    \"text\": \"Item2\",\n    \"events\": {                              // Adds eventlisteners to the item (you can use any event there is)\n      \"click\": function(e){\n        console.log(\"clicked\");\n      },\n      \"mouseover\": function(e){\n        console.log(\"mouse is over menuitem\");\n      }\n    }\n  }\n];\n```\n**NOTE:** The braces after the = and after `\"sub\":` are square ones!\n\n**NOTE:** Every other property, not mentioned here, is skipped!\n\n### ContextUtil\nA collection of helper methods. Can't be instanciated.\n#### Methods\n```javascript\nContextUtil.getProperty(opt, o, def);        // Returns the value of 'o' in the array/object opt, if it is set;\n                                             // else it returns def (object, string, object)\n\nContextUtil.getSizes(obj);                   // Recursively gets the size of a DOM-List (ul), that has absolute positioned\n                                             // children (dom-element)\n```\n\n### Options\n\n| Option | Values | Definition |\n|:---------------:|:----------:|:---------------------------------------------------------------:|\n| close_on_resize | true/false | Sets if the contextmenu is closed, when the window is resized |\n| close_on_click | true/false | Sets if the contextmenu is closed, when the window is clicked |\n| default_icon | [string] | Sets the default icon for a menu item (is overridden, when set) |\n| default_text | [string] | Sets the default text for a menu item (is overridden, when set) |\n| sub_icon | [string] | Sets the arrow icon for sub menus |\n| mouse_offset | [integer] | Sets the offset to the mouse, when opened (in pixel) |\n\n## Example\n### Code:\n```javascript\nvar menu = new ContextMenu(\n  [\n    {\n      \"text\": \"Item 1\",\n      \"sub\": [\n        {\n          \"text\": \"Item 11\"\n        },\n        {\n          \"text\": \"Item 12\"\n        },\n        {\n          \"type\": ContextMenu.DIVIDER\n        },\n        {\n          \"text\": \"Item 13\",\n          \"enabled\": false,\n          \"sub\": [\n            {\n              \"text\": \"Item 131\"\n            }\n          ]\n        }\n      ]\n    },\n    {\n      \"text\": \"Item 2\",\n      \"icon\": '\u003ci class=\"fas fa-exclamation-circle\"\u003e\u003c/i\u003e',\n      \"events\": {\n        \"click\": function(e){\n          alert(e);\n        }\n      }\n    }\n  ]\n);\n```\n\n### Output:\n\n![contextmenuJs example](demo/example.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thalmann%2Fcontextmenujs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-thalmann%2Fcontextmenujs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thalmann%2Fcontextmenujs/lists"}