{"id":17344379,"url":"https://github.com/ivteplo/html-context-menu-element","last_synced_at":"2026-02-04T09:10:23.581Z","repository":{"id":216189831,"uuid":"740507320","full_name":"ivteplo/html-context-menu-element","owner":"ivteplo","description":"Easily create a custom context menu using HTML custom elements","archived":false,"fork":false,"pushed_at":"2025-03-01T20:23:45.000Z","size":141,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T02:17:02.558Z","etag":null,"topics":["components","context-menu","css","html","html-custom-elements","javascript","pure-javascript","ui-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivteplo.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-08T13:42:02.000Z","updated_at":"2025-03-01T20:23:49.000Z","dependencies_parsed_at":"2025-01-23T20:22:51.115Z","dependency_job_id":"0c51e789-fc3e-4802-b4c8-2fed6a9c5c1d","html_url":"https://github.com/ivteplo/html-context-menu-element","commit_stats":null,"previous_names":["ivteplo/context-menu"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivteplo%2Fhtml-context-menu-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivteplo%2Fhtml-context-menu-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivteplo%2Fhtml-context-menu-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivteplo%2Fhtml-context-menu-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivteplo","download_url":"https://codeload.github.com/ivteplo/html-context-menu-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922243,"owners_count":20855345,"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":["components","context-menu","css","html","html-custom-elements","javascript","pure-javascript","ui-components"],"created_at":"2024-10-15T16:25:06.003Z","updated_at":"2026-02-04T09:10:18.555Z","avatar_url":"https://github.com/ivteplo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Context Menu\nAn HTML custom element, designed to let you quickly create an easily-customizable context menu.\n\n## Features\n- Automatically registers all the needed event listeners.\n  Simply define a `\u003ccontext-menu\u003e` element, give it an identifier\n  and then set the `data-context-menu` attribute to that identifier\n  for all elements that should use this custom context menu.\n- Supports keyboard input.\n\n\n## Installation\nYou can install this library from the NPM registry:\n```bash\nnpm install @ivteplo/html-context-menu-element\n```\n\nOr you can import it dynamically from a CDN:\n```javascript\nconst { defineElements } = await import(\"https://unpkg.com/@ivteplo/html-context-menu-element@1.1.0-alpha.3/build/index.js\")\n```\n\n\n## Usage\nFirst, we need to define the components in the custom element registry and import the default stylesheet:\n```javascript\nimport { defineElements } from \"@ivteplo/html-context-menu-element\"\nimport \"@ivteplo/html-context-menu-element/index.css\"\ndefineElements()\n```\n\nThen you can define your context menus in the HTML the following way:\n```html\n\u003ccontext-menu id=\"my-context-menu\"\u003e\n\t\u003cbutton type=\"button\"\u003eButton 1\u003c/button\u003e\n\t\u003cbutton type=\"button\"\u003eButton 2\u003c/button\u003e\n\n\t\u003c!-- Separators are added using \u003chr\u003e --\u003e\n\t\u003chr\u003e\n\n\t\u003c!-- Dropdown section --\u003e\n\t\u003cdetails is=\"context-menu-group\"\u003e\n\t\t\u003c!-- Label of the dropdown section --\u003e\n\t\t\u003csummary\u003eDropdown\u003c/summary\u003e\n\t\t\u003cmenu\u003e\n\t\t\t\u003cbutton type=\"button\"\u003eChild button 1\u003c/button\u003e\n\t\t\t\u003cbutton type=\"button\"\u003eChild button 2\u003c/button\u003e\n\t\t\u003c/menu\u003e\n\t\u003c/details\u003e\n\u003c/context-menu\u003e\n```\n\nNow, if you want to apply the context menu to an element,\nset that element’s attribute `data-context-menu` to the ID\nof the context menu:\n```html\n\u003cdiv data-context-menu=\"my-context-menu\"\u003e\n\tThis container has a custom context menu.\n\u003c/div\u003e\n```\nAll the event listeners will be registered automatically.\n\n\n## API Documentation\nYou can find the API documentation [in the repository](./documentation/API.md).\n\n\n## Development\n\n### Prerequisites\nYou need to have Git, Node.js, Deno, and any browser installed.\n\n### Setup\n1. Open your terminal.\n2. Clone this repository:\n\t```bash\n\tgit clone https://github.com/ivteplo/html-context-menu-element/\n  ```\n3. Navigate into the cloned directory:\n\t```bash\n\tcd html-context-menu-element\n\t```\n4. Install dependencies:\n\t```bash\n\tnpm install\n\t```\n5. Start the development server:\n\t```bash\n\tnpm run dev\n\t```\n6. Build the library:\n\t```bash\n\tnpm run build\n\t```\n7. Generate the API documentation:\n\t```bash\n\tnpm run docs:api\n\t```\n8. Happy hacking! 🎉\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivteplo%2Fhtml-context-menu-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivteplo%2Fhtml-context-menu-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivteplo%2Fhtml-context-menu-element/lists"}