{"id":15063551,"url":"https://github.com/lekoala/pure-context-menu","last_synced_at":"2025-10-11T20:33:00.854Z","repository":{"id":57698591,"uuid":"505776534","full_name":"lekoala/pure-context-menu","owner":"lekoala","description":"Easy context menu manager","archived":false,"fork":false,"pushed_at":"2024-09-30T14:47:52.000Z","size":464,"stargazers_count":11,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-21T02:23:12.719Z","etag":null,"topics":["bootstrap","bootstrap5","context-menu","contextmenu","es6","menu"],"latest_commit_sha":null,"homepage":"","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/lekoala.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"lekoala"}},"created_at":"2022-06-21T09:31:10.000Z","updated_at":"2024-12-10T02:31:57.000Z","dependencies_parsed_at":"2022-08-25T12:32:11.201Z","dependency_job_id":"c5cdf586-4483-4847-b0ed-1a8f3f5a62aa","html_url":"https://github.com/lekoala/pure-context-menu","commit_stats":{"total_commits":50,"total_committers":3,"mean_commits":"16.666666666666668","dds":0.06000000000000005,"last_synced_commit":"d9fa6a5ae3f25754a778f9b669713bcf49097b25"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/lekoala/pure-context-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fpure-context-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fpure-context-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fpure-context-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fpure-context-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lekoala","download_url":"https://codeload.github.com/lekoala/pure-context-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lekoala%2Fpure-context-menu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008617,"owners_count":26084480,"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","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap","bootstrap5","context-menu","contextmenu","es6","menu"],"created_at":"2024-09-25T00:04:26.497Z","updated_at":"2025-10-11T20:33:00.826Z","avatar_url":"https://github.com/lekoala.png","language":"JavaScript","funding_links":["https://github.com/sponsors/lekoala"],"categories":[],"sub_categories":[],"readme":"# Pure Context Menu\n\n[![NPM](https://nodei.co/npm/pure-context-menu.png?mini=true)](https://nodei.co/npm/pure-context-menu/)\n[![Downloads](https://img.shields.io/npm/dt/pure-context-menu.svg)](https://www.npmjs.com/package/pure-context-menu)\n\n## How to use\n\nEasily manage the right click context menu.\n\nNo additional CSS needed if you are using Bootstrap!\n\n```js\nimport PureContextMenu from \"./pure-context-menu.js\";\n\nconst items = [\n  {\n    label: \"Click here\",\n    callback: () =\u003e {\n      alert(\"You clicked here\");\n    },\n  },\n  \"-\",\n  {\n    label: \"Target click\",\n    callback: (e) =\u003e {\n      if (e.target.id) {\n        alert(\"You clicked on target \" + e.target.id);\n      } else {\n        alert(\"You didn't click on a target\");\n      }\n    },\n  },\n  {\n    label: \"This is a long menu item that spans on two line\",\n    callback: () =\u003e {\n      alert(\"You clicked on a long line\");\n    },\n  },\n  {\n    label: \"This will not close\",\n    preventCloseOnClick: true,\n    callback: () =\u003e {\n      alert(\"It didn't close\");\n    },\n  },\n];\n// bind to html if body does not have 100% height\nlet bodyMenu = new PureContextMenu(document.querySelector(\"html\"), items);\n```\n\n## Features\n\n### Built-in styles for Bootstrap\n\nEasy context menu use default Bootstrap styles so you don't need extra css. Otherwise, look at `styles.scss` to see some default styles you can use.\nIt can either use [dropdown](https://getbootstrap.com/docs/5.3/components/dropdowns/#single-button) or [list groups](https://getbootstrap.com/docs/5.3/components/list-group/#for-links-and-buttons) styles.\n\n### Prevent close on click\n\nBy default, clicking on an item will close the menu. You can control this with `preventCloseOnClick`.\n\n### Determining target\n\nThe callback receive the event that originally opened the context menu. This allow determing the target under the context menu.\nIf you need to adjust items based on the current target, use `setItems` during the `show` callback.\n\n### Dividers\n\nSimply pass \"-\" in the list of elements to mark dividers. This doesn't work well with list group styles since items are already separated.\n\n### Mobile support\n\nSurprisingly, modern mobile browsers translate long press to a contextmenu event that it works out of the box :-)\n\nIf it's not working, `long-press` is supported, simply add it to your pages\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/long-press-event@2.4.6/dist/long-press-event.min.js\" type=\"module\"\u003e\u003c/script\u003e\n```\n\n## Popover api\n\nPopover api will be used if available or fallback gracefully to fixed/z-index.\n\n## Options\n\nOptions can be either passed to the constructor (eg: optionName) or globally updated using `PureContextMenu.updateGlobalOptions`\n\n| Name                | Type                  | Description                                                     |\n| ------------------- | --------------------- | --------------------------------------------------------------- |\n| contextMenuClass    | \u003ccode\u003eString\u003c/code\u003e   | Class applied for holder element                                |\n| dropdownClass       | \u003ccode\u003eString\u003c/code\u003e   | Class applied for dropdown. Accepts space separated classes     |\n| dividerClass        | \u003ccode\u003eString\u003c/code\u003e   | Class applied to the divider item                               |\n| menuItemClass       | \u003ccode\u003eString\u003c/code\u003e   | Class applied to the li in all cases.                           |\n| itemClass           | \u003ccode\u003eString\u003c/code\u003e   | Class applied to the menu item. Accepts space separated classes |\n| disabledClass       | \u003ccode\u003eString\u003c/code\u003e   | Class applied to the disabled items                             |\n| zIndex              | \u003ccode\u003eNumber\u003c/code\u003e   | z-index assigned to the menu                                    |\n| preventCloseOnClick | \u003ccode\u003eBoolean\u003c/code\u003e  | Global behaviour for items when clicking                        |\n| useLists            | \u003ccode\u003eBoolean\u003c/code\u003e  | Enable list groups                                              |\n| listClass           | \u003ccode\u003eString\u003c/code\u003e   | Class applied to the list                                       |\n| listItemClass       | \u003ccode\u003eString\u003c/code\u003e   | Class applied to the list item. Accepts space separated classes |\n| fastClick           | \u003ccode\u003eBoolean\u003c/code\u003e  | Triggers click on touchstart for mobile devices                 |\n| closeIfOpen         | \u003ccode\u003eBoolean\u003c/code\u003e  | Close menu with right close if already opened                   |\n| show                | \u003ccode\u003efunction\u003c/code\u003e | Whether to show menu based on event                             |\n| minWidth            | \u003ccode\u003eString\u003c/code\u003e   | Defaults to 120px                                               |\n| maxWidth            | \u003ccode\u003eString\u003c/code\u003e   | Defaults to 240px                                               |\n| popover             | \u003ccode\u003eBoolean\u003c/code\u003e  | Use popover api if available. Allows backdrops.                 |\n\n## Item\n\n| Name                  | Type                  |\n| --------------------- | --------------------- |\n| label                 | \u003ccode\u003eString\u003c/code\u003e   |\n| [html]                | \u003ccode\u003eBoolean\u003c/code\u003e  |\n| [classes]             | \u003ccode\u003eArray\u003c/code\u003e    |\n| [preventCloseOnClick] | \u003ccode\u003eBoolean\u003c/code\u003e  |\n| [disabled]            | \u003ccode\u003eBoolean\u003c/code\u003e  |\n| [callback]            | \u003ccode\u003efunction\u003c/code\u003e |\n\n## Demo\n\nhttps://codepen.io/lekoalabe/pen/LYJbGYg\n\n## Browser supports\n\nModern browsers (edge, chrome, firefox, safari... not IE11). [Add a warning if necessary](https://github.com/lekoala/nomodule-browser-warning.js/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoala%2Fpure-context-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flekoala%2Fpure-context-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flekoala%2Fpure-context-menu/lists"}