{"id":15064407,"url":"https://github.com/vincentlaucsb/svelte-contextmenu","last_synced_at":"2025-04-10T11:52:38.760Z","repository":{"id":65574140,"uuid":"500241964","full_name":"vincentlaucsb/svelte-contextmenu","owner":"vincentlaucsb","description":"A simple but complete context menu library for Svelte","archived":false,"fork":false,"pushed_at":"2023-01-15T12:43:44.000Z","size":101,"stargazers_count":12,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T10:45:48.841Z","etag":null,"topics":["context","contextmenu","menu","svelte"],"latest_commit_sha":null,"homepage":"","language":"Svelte","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/vincentlaucsb.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":"2022-06-06T00:09:06.000Z","updated_at":"2025-01-08T06:51:27.000Z","dependencies_parsed_at":"2023-02-09T22:05:37.290Z","dependency_job_id":null,"html_url":"https://github.com/vincentlaucsb/svelte-contextmenu","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentlaucsb%2Fsvelte-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentlaucsb%2Fsvelte-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentlaucsb%2Fsvelte-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vincentlaucsb%2Fsvelte-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vincentlaucsb","download_url":"https://codeload.github.com/vincentlaucsb/svelte-contextmenu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248215192,"owners_count":21066622,"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":["context","contextmenu","menu","svelte"],"created_at":"2024-09-25T00:17:25.646Z","updated_at":"2025-04-10T11:52:38.741Z","avatar_url":"https://github.com/vincentlaucsb.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vince's Svelte Context Menu\n\nA simple, no-frills context menu that works out of the box with Bootstrap but allows total customization. This context menu can be set up to work with `on:click` and `on:contextmenu`.\n\nBy default, the context menu will appear to the bottom and right of where a click occurred. However, it automatically repositions itself if it overflows.\n\n[**Live Demo**](https://vincentlaucsb.github.io/context-menu/public/)\n\n### Install\nhttps://www.npmjs.com/package/svelte-contextmenu\n\n`npm install --save-dev svelte-contextmenu`\n\n## Basic Usage\n```svelte\n\u003cscript\u003e\n  import ContextMenu, { Item, Divider, Settings } from \"svelte-contextmenu\";\n  let myMenu;\n\u003c/script\u003e\n\n\u003cbutton class=\"btn btn-primary\" on:click={myMenu.createHandler()}\u003e\n  Left Click Trigger\n\u003c/button\u003e\n\u003cbutton class=\"btn btn-primary\" on:contextmenu={(e) =\u003e {\n    console.log(\"Activating context menu\");\n    myMenu.show(e);\n  }}\u003e\n  Right click Trigger\n\u003c/button\u003e\n\n\u003cContextMenu bind:this={myMenu}\u003e\n  \u003cItem href=\"https://\" target={linkTarget}\u003eThis will be rendered with an anchor tag\u003c/Item\u003e\n  \u003cItem\u003eThis will be rendered as a button\u003c/Item\u003e\n  \u003cDivider /\u003e\n  \u003cItem\u003e\n\u003c/ContextMenu\u003e\n```\n\n## Using Custom Dropdown Items and Disabling Auto-Close Behavior\nWhile `svelte-context-menu` provides `Item` and `Divider` components which should satisfy most use-cases, you are not limited to those.\nFor example, you can add forms and checkboxes to dropdown menus.\n\nFurthermore, while clicking on the menu will automatically close it, this behavior can be disabled for indivdual items. The `Item` component has an `autoclose` prop which may be set to `false`, while custom children may assign the `data-autoclose` attribute.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import ContextMenu, { Item, Divider, Settings } from \"svelte-context-menu\";\n\n  let openInNewTab = false;\n  let fireMenu : ContextMenu;\n  \n  $: linkTarget = openInNewTab ? \"blank\" : \"\";\n\u003c/script\u003e\n\n\u003cContextMenu bind:this={fireMenu}\u003e\n  \u003cItem href=\"https://youtu.be/PvF9PAxe5Ng?t=7\" target={linkTarget}\u003e⛽ Give me fuel\u003c/Item\u003e\n  \u003cItem href=\"https://youtu.be/PvF9PAxe5Ng?t=8\" target={linkTarget}\u003e🔥 Give me fire\u003c/Item\u003e\n  \u003cItem href=\"https://youtu.be/PvF9PAxe5Ng?t=9\" target={linkTarget}\u003e🧞‍♀️ Give me that which I desire\u003c/Item\u003e\n  \u003cDivider /\u003e\n  \u003cform class=\"px-3 py-1\" data-autoclose=\"false\"\u003e\n    \u003cdiv class=\"form-check\"\u003e\n      \u003cinput type=\"checkbox\" class=\"form-check-input\" id=\"dropdownCheck\" bind:checked={openInNewTab}\u003e\n      \u003clabel class=\"form-check-label\" for=\"dropdownCheck\"\u003e\n        Open links in a new tab\n      \u003c/label\u003e\n    \u003c/div\u003e\n  \u003c/form\u003e\n\u003c/ContextMenu\u003e\n```\n## Styling\nFor convenience, the context menus come with styling. However, you may override the default styling on a global \nor an individual basis.\n\n### CSS Variables\nIn most cases, the default styling can be changed to meet one's needs by defining \nCSS variables.\n\n```css\n:root {\n  --ctx-menu-background: #eeeeee;\n  --ctx-menu-border: 1px solid #aaaaaa;\n  --ctx-menu-border-radius: 0.5rem;\n  --ctx-menu-hover-bg: #bbbbbb;\n  --ctx-menu-font-size: 0.9rem;\n  --ctx-menu-padding: 0.375rem 0.5rem;\n}\n```\n\nMore variables can be found by inspecting the rendered context menu.\n\n### Individual Styling\n`svelte-contextmenu` comes with default CSS classes, and they may be appended to or replaced entirely via the `Settings` class.\n\n```svelte\n\u003cscript\u003e\n  import ContextMenu, { Item, Divider, Settings } from \"svelte-contextmenu\";\n\n  // Use default CSS class names *without* styling\n  const boldSettings = new Settings();\n\n  /* Alternative 1: Build off of default styling \n   * const boldSettings = Settings.DefaultCSS();\n   */\n\n  /* Alternative 2: Build off of Bootstrap styling \n   * const boldSettings = Settings.BootstrapCss();\n   */\n\n  boldSettings.Item.Class.push(\"fw-bold\");\n\u003c/script\u003e\n\n\u003cContextMenu bind:this={boldMenu} settings={boldSettings}\u003e\n```\n\n### Global Styling\nIn the above example, settings were created and applied to a single instance. However,\nsettings can also be set globally using the `defaultSettings` store.\n\n```svelte\n\u003cscript\u003e\n  import ContextMenu, { defaultSettings, Settings } from \"svelte-contextmenu\";\n\n  const boldSettings = new Settings();\n  boldSettings.ItemContent.Class.push(\"fw-bold\");\n\n  // Set global styles to `boldSettings`\n  defaultSettings.set(boldSettings);\n\u003c/script\u003e\n```\n\n#### Bootstrap Styling: A shorthand\n`svelte-contextmenu` contains a simple `useBootstrap()` function that may be called at\nthe top of your app to make the menu use Bootstrap 5 classes everywhere.\n\n```svelte\n\u003cscript\u003e\n  import ContextMenu, { useBootstrap } from \"svelte-contextmenu\";\n\n  // Use Bootstrap 5 classes globally\n  useBootstrap();\n\u003c/script\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincentlaucsb%2Fsvelte-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvincentlaucsb%2Fsvelte-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvincentlaucsb%2Fsvelte-contextmenu/lists"}