{"id":17808109,"url":"https://github.com/svar-widgets/menu","last_synced_at":"2026-03-18T02:01:50.236Z","repository":{"id":257813952,"uuid":"867784083","full_name":"svar-widgets/menu","owner":"svar-widgets","description":"Svelte menu component. Build dropdown menus, context menus, or complex menu bars.","archived":false,"fork":false,"pushed_at":"2026-03-04T15:56:03.000Z","size":878,"stargazers_count":32,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-03-04T21:38:59.289Z","etag":null,"topics":["menu","menu-bar","menu-component","menu-navigation","svelte","svelte-component","svelte-ui-components","svelte4","svelte5","sveltejs","ui-component"],"latest_commit_sha":null,"homepage":"https://docs.svar.dev/svelte/core/category/menu","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/svar-widgets.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","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,"zenodo":null}},"created_at":"2024-10-04T18:00:01.000Z","updated_at":"2026-03-04T16:03:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"0579f648-8af2-40a7-bdd6-01aed9ecf019","html_url":"https://github.com/svar-widgets/menu","commit_stats":null,"previous_names":["svar-widgets/menu"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/svar-widgets/menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svar-widgets","download_url":"https://codeload.github.com/svar-widgets/menu/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fmenu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30641693,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-18T01:41:58.583Z","status":"online","status_checked_at":"2026-03-18T02:00:07.824Z","response_time":104,"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":["menu","menu-bar","menu-component","menu-navigation","svelte","svelte-component","svelte-ui-components","svelte4","svelte5","sveltejs","ui-component"],"created_at":"2024-10-27T15:06:13.777Z","updated_at":"2026-03-18T02:01:50.215Z","avatar_url":"https://github.com/svar-widgets.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\t\n# SVAR Svelte Menu\n\n[![npm](https://img.shields.io/npm/v/@svar-ui/svelte-menu.svg)](https://www.npmjs.com/package/@svar-ui/svelte-menu)\n[![License](https://img.shields.io/github/license/svar-widgets/menu)](https://github.com/svar-widgets/menu/blob/main/license.txt)\n[![npm downloads](https://img.shields.io/npm/dm/@svar-ui/svelte-menu.svg)](https://www.npmjs.com/package/@svar-ui/svelte-menu)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[Documentation](https://docs.svar.dev/svelte/core/category/menu/) • [Demos](https://docs.svar.dev/svelte/core/samples-menu/#/action/willow)\n\n\u003c/div\u003e\n\n**SVAR Menu** is a ready-to-use Svelte component for creating context and popup menus. Easily customize each menu item with text, icons, and sub-items, and control the menu's position relative to its parent element.\n\n\u003cdiv align=\"center\"\u003e\n\t\n\u003cimg src=\"https://svar.dev/images/github/github-menu.png\" alt=\"Svelte Menu Component\" style=\"width: 600px;\"\u003e\n\n\u003c/div\u003e\n\n### Svelte 4 and Svelte 5 versions\n\nThere are two versions of the library: the 1.x version, designed to work with Svelte 4, and the 2.x version, created for Svelte 5. To use the SVAR Menu beta for Svelte 5, install it as follows:\n\n```\nnpm install @svar-ui/svelte-menu\n```\n\nTo use the SVAR Menu for Svelte 4:\n\n```\nnpm install wx-svelte-menu@1.3.0\n```\n\n### How to Use\n\nTo use SVAR Svelte Menu, simply import the package and include the component in your Svelte file:\n\n```svelte\n\u003cscript\u003e\n\timport { Menu } from \"@svar-ui/svelte-menu\";\n\n\tfunction onClick(ev) {\n\t\tmessage = ev.option ? `clicked on ${ev.option.id}` : \"closed\";\n\t}\n\n\tconst options = [\n\t\t{ id: \"edit-cut\", text: \"Cut\", icon: \"wxi wxi-content-cut\" },\n\t\t{ id: \"edit-copy\", text: \"Copy\", icon: \"wxi wxi-content-copy\" },\n\t\t{\n\t\t\tid: \"edit-paste\",\n\t\t\ttext: \"Paste\",\n\t\t\ticon: \"wxi wxi-content-paste\",\n\t\t},\n\t];\n\u003c/script\u003e\n\n\u003cMenu {options} onclick={onClick} /\u003e\n```\n\nFor more details, please visit the [getting started guide](https://docs.svar.dev/svelte/core/category/menu/).\n\n### How to Modify\n\nTypically, you don't need to modify the code. However, if you wish to do so, follow these steps:\n\n1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work\n2. Start the project in development mode with `yarn start`\n\n### Run Tests\n\nTo run the test:\n\n1. Start the test examples with:\n    ```sh\n    yarn start:tests\n    ```\n2. In a separate console, run the end-to-end tests with:\n    ```sh\n    yarn test:cypress\n    ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Fmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvar-widgets%2Fmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Fmenu/lists"}