{"id":13376220,"url":"https://github.com/selimdoyranli/v-dropdown-menu","last_synced_at":"2026-02-24T23:14:05.876Z","repository":{"id":53473973,"uuid":"262833118","full_name":"selimdoyranli/v-dropdown-menu","owner":"selimdoyranli","description":"Customizable dropdown menu for vue 🟩🔽","archived":false,"fork":false,"pushed_at":"2025-02-20T07:26:26.000Z","size":3818,"stargazers_count":32,"open_issues_count":3,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-07T00:40:28.840Z","etag":null,"topics":["dropdown-menu","nuxt-dropdown","vdropdown-menu","vue-dropdown","vue-plugin","vuejs"],"latest_commit_sha":null,"homepage":"https://v-dropdown-menu.vercel.app","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/selimdoyranli.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2020-05-10T16:52:29.000Z","updated_at":"2024-08-23T16:23:13.000Z","dependencies_parsed_at":"2024-01-07T12:17:39.731Z","dependency_job_id":"281594e1-b8c7-4a6c-951b-06f93e39af8b","html_url":"https://github.com/selimdoyranli/v-dropdown-menu","commit_stats":null,"previous_names":["selimdoyranli/v-dropdown-menu","radkod/v-dropdown-menu"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdoyranli%2Fv-dropdown-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdoyranli%2Fv-dropdown-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdoyranli%2Fv-dropdown-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selimdoyranli%2Fv-dropdown-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selimdoyranli","download_url":"https://codeload.github.com/selimdoyranli/v-dropdown-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243327721,"owners_count":20273734,"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":["dropdown-menu","nuxt-dropdown","vdropdown-menu","vue-dropdown","vue-plugin","vuejs"],"created_at":"2024-07-30T05:02:35.237Z","updated_at":"2026-02-24T23:14:00.842Z","avatar_url":"https://github.com/selimdoyranli.png","language":"JavaScript","funding_links":["https://github.com/sponsors/selimdoyranli","https://buymeacoffee.com/selimdoyranli","https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png'/"],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![changelog][changelog-src]][changelog-href]\n[![License][license-src]][license-href]\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://v-dropdown-menu.vercel.app\" target=\"_blank\"\u003e \n    \u003cimg src='/meta/logo.png' width=\"256\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cb\u003ev-dropdown-menu\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nCustomizable dropdown menu for vue 🟩🔽\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://v-dropdown-menu.vercel.app\" target=\"_blank\"\u003e \n    \u003cimg src='/meta/preview.jpg' width=\"256\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/selimdoyranli/v-dropdown-menu\" target=\"__blank\"\u003e\u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/selimdoyranli/v-dropdown-menu?style=social\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://v-dropdown-menu.vercel.app\" target=\"_blank\"\u003eWebsite\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\u003csub\u003e\u003cb\u003eSponsorship 💖\u003c/b\u003e\u003c/sub\u003e\u003cbr\u003e\n\u003csub\u003e\u003ca href=\"https://github.com/sponsors/selimdoyranli\"\u003eGitHub\u003c/a\u003e\u003c/sub\u003e\u003cbr\u003e\n\u003csub\u003e\u003ca href=\"https://buymeacoffee.com/selimdoyranli\"\u003eBuy me a coffee\u003c/a\u003e\u003c/sub\u003e\u003cbr\u003e\n\u003c/div\u003e\n\n## Features\n- ⚡️ Lightweight\n- 🎨 Interactive\n- 🛠️ Customizable\n- 👶🏻 Easy implementation\n- 📦 Vue2 \u0026 Vue3 support\n- 💉 SSR compatible\n\n## Getting Started\n\n### Try it Online ⚡️\n\n[DEMO](https://v-dropdown-menu.vercel.app/demo)\n\n\n## Installation\n\n```js\nyarn add v-dropdown-menu  # or npm i v-dropdown-menu\n```\n\n### Vue3\n\n#### Global Register\n\n```js\nimport { createApp } from 'vue'\nimport App from './App.vue'\nimport DropdownMenu from 'v-dropdown-menu'\nimport 'v-dropdown-menu/css'\n\nconst app = createApp(App)\n\napp.use(DropdownMenu)\napp.mount('#app')\n```\n\n#### Local Register\n```html\n\u003cscript setup\u003e\nimport DropdownMenu from 'v-dropdown-menu'\nimport 'v-dropdown-menu/css'\n\u003c/script\u003e\n```\n#### Via CDN\n```js\n\u003cscript src=\"https://unpkg.com/vue@3\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/v-dropdown-menu\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/v-dropdown-menu/dist/vue3/v-dropdown-menu.css\"\u003e\n\n\u003cscript\u003e\n  const app = Vue.createApp({})\n    \n  app.use(DropdownMenu)\n  app.mount('#app')\n\u003c/script\u003e\n```\n\n### Vue2\n\n#### Global Register\n\n```js\nimport Vue from \"vue\"\nimport DropdownMenu from \"v-dropdown-menu/vue2\"\nimport 'v-dropdown-menu/vue2/css'\n\nVue.use(DropdownMenu);\n```\n\n#### Local Register\n```js\nimport DropdownMenu from \"v-dropdown-menu/vue2\"\nimport 'v-dropdown-menu/vue2/css'\n\nexport default {\n  components: {\n    DropdownMenu\n  }\n}\n```\n#### Via CDN\n```js\n\u003cscript src=\"https://unpkg.com/vue@2\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/v-dropdown-menu/vue2\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/v-dropdown-menu/dist/vue2/v-dropdown-menu.css\"\u003e\n\n\u003cscript\u003e\nnew  Vue({\n  el: \"#app\"\n});\n\nVue.use(DropdownMenu);\n\u003c/script\u003e\n```\n\u0026nbsp;\n\n### Usage\n\n```html\n\u003cdropdown-menu\u003e\n  \u003ctemplate #trigger\u003e\n    \u003cbutton\u003eOpen Dropdown\u003c/button\u003e\n  \u003c/template\u003e\n  \n  \u003ctemplate #header\u003e Dropdown Header \u003c/template\u003e\n  \n  \u003ctemplate #body\u003e\n    \u003cul\u003e\n      \u003cli v-for=\"i in 6\" :key=\"i\"\u003e\n        \u003ca href=\"\"\u003eItem {{ i }}\u003c/a\u003e\n      \u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/template\u003e\n  \n  \u003ctemplate #footer\u003e Dropdown Footer \u003c/template\u003e\n\u003c/dropdown-menu\u003e\n\n```\n\n#### Props\n| Name | Description | Type| Options| Default |\n|--|--|--|--|--|\n|isOpen|Show or hide for dropdown|Boolean|`true` , `false` | false\n|mode|Open variant|String|`click` , `hover` | click\n| dropup |Open the menu upwards | Boolean | `true` , `false` | false\n|direction|Menu container direction|String|`left` , `right` , `center` | left\n|closeOnClickOutside|closes dropdown menu when click outside|Booelan|`true` , `false` | true\n|withDropdownCloser|  If there is an element in the menu with **dropdown-closer** attribute, clicking on it closes the menu.|Boolean|`true` , `false` | false\n|containerZIndex|z-index of menu container|String| .| 994\n|overlay|background overlay of dropdown menu (only for click mode) |Boolean| `true` , `false`| true\n|overlayBgColor|background-color of overlay |String| ex: `rgba(1, 35, 83, 0.8)`| rgba(0, 0, 0, 0.2)\n|overlayZIndex|z-index of overlay|String| .| 992\n|transition|custom vue transition for menu|String| .| default\n\n#### Slots\n|Name| Description |\n|--|--|\n|trigger|trigger for dropdown menu |\n|header|header of menu container (optional)|\n|body|content of menu (optional)|\n|footer|footer of menu container (optional)|\n\n#### Events (only for click mode)\n|  |\n|--|\n| `@opened=\"dispatchEvent\"`|\n| `@closed=\"dispatchEvent\"`|\n\n\n---\n\n## Development\n\n### Vue3\n\n```bash\nyarn build:vue3 # build for vue3\n```\n\n```bash\n# Serve\n\ncd dev/vue3\n\nyarn install\nyarn serve\n```\n\n### Vue2\n\n```bash\nyarn build:vue2 # build for vue2\n```\n\n```bash\n# Serve\n\ncd dev/vue2\n\nyarn install\nyarn serve\n```\n\n### Vue 2\u00263\n\n```bash\nyarn build # build for vue2 and vue3\n```\n\n#### Linter\n\n```bash\n# run eslint\nyarn lint:eslint\n\n# run eslint fix\nyarn lint:eslint:fix\n\n# run stylelint\nyarn lint:stylelint\n\n# run stylelint fix\nyarn lint:stylelint:fix\n\n# run prettier\nyarn prettier\n\n```\n\n## Sponsorship\n\nYou can sponsor me for the continuity of my projects:\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://github.com/sponsors/selimdoyranli\"\u003e\n    \u003cimg src='https://img.shields.io/github/sponsors/selimdoyranli?style=for-the-badge\u0026label=%E2%99%A5+Be+Sponsor\u0026logo=GitHub'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://buymeacoffee.com/selimdoyranli\"\u003e\n    \u003cimg src='https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\n[MIT License](./LICENSE)\n\nCopyright (c) selimdoyranli \u003cselimdoyranli@gmail.com\u003e\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/v-dropdown-menu/latest.svg\n[npm-version-href]: https://npmjs.com/package/v-dropdown-menu\n\n[npm-downloads-src]: https://img.shields.io/npm/dt/v-dropdown-menu.svg\n[npm-downloads-href]: https://npmjs.com/package/v-dropdown-menu\n\n[codecov-src]: https://img.shields.io/codecov/c/github/selimdoyranli/v-dropdown-menu.svg\n[codecov-href]: https://codecov.io/gh/selimdoyranli/v-dropdown-menu\n\n[changelog-src]: https://img.shields.io/static/v1?label=%F0%9F%93%96\u0026message=Release%20Notes%20|%20CHANGELOG\u0026color=blue\n[changelog-href]: ./CHANGELOG.md\n\n[license-src]: https://img.shields.io/badge/License-MIT-blue.svg\n[license-href]: https://npmjs.com/package/v-dropdown-menu/LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselimdoyranli%2Fv-dropdown-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselimdoyranli%2Fv-dropdown-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselimdoyranli%2Fv-dropdown-menu/lists"}