{"id":17857237,"url":"https://github.com/kouts/vue-simple-dropdown","last_synced_at":"2025-04-02T18:22:03.666Z","repository":{"id":57705596,"uuid":"524701149","full_name":"kouts/vue-simple-dropdown","owner":"kouts","description":"A Vue.js 3 simple dropdown menu component for floating-vue","archived":false,"fork":false,"pushed_at":"2022-11-11T20:04:54.000Z","size":543,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-08T21:03:49.868Z","etag":null,"topics":["dropdown","dropdown-menu","dropdown-menus","menu","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/kouts.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}},"created_at":"2022-08-14T14:56:19.000Z","updated_at":"2023-01-12T15:04:48.000Z","dependencies_parsed_at":"2022-09-07T04:21:26.626Z","dependency_job_id":null,"html_url":"https://github.com/kouts/vue-simple-dropdown","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-simple-dropdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-simple-dropdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-simple-dropdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kouts%2Fvue-simple-dropdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kouts","download_url":"https://codeload.github.com/kouts/vue-simple-dropdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246866288,"owners_count":20846544,"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","dropdown-menu","dropdown-menus","menu","vue"],"created_at":"2024-10-28T03:12:04.154Z","updated_at":"2025-04-02T18:22:03.648Z","avatar_url":"https://github.com/kouts.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-simple-dropdown \u003ca href=\"https://npm.im/@kouts/vue-simple-dropdown\"\u003e\u003cimg src=\"https://badgen.net/npm/v/@kouts/vue-simple-dropdown\"\u003e\u003c/a\u003e ![](https://img.badgesize.io/kouts/vue-simple-dropdown/main/dist/vue-simple-dropdown.umd.js.svg) ![](https://img.badgesize.io/kouts/vue-simple-dropdown/main/dist/vue-simple-dropdown.umd.js.svg?compression=gzip)\n\nA Vue.js 3 simple dropdown menu component for [floating-vue](https://github.com/Akryum/floating-vue).\n\n\u003e vue-simple-dropdown is build on top of [floating-vue](https://github.com/Akryum/floating-vue) to provide \n\u003e **keyboard navigation** for simple dropdown menus. \n\n## Features at a glance\n\n- All [floating-vue Dropdown component](https://floating-vue.starpad.dev/guide/component.html#dropdown) features\n- Completely headless, easily customizable using any CSS framework e.g Tailwind\n- Keyboard navigation using the Up/Down arrows\n- Customizable CSS selector for the menu items used for the keyboard navigation\n- Opens and closes with the `space` and `enter` key when the dropdown trigger has focus\n- Prevents page scroll while navigating the menu with the keyboard\n- Closes by clicking outside or by using the `Esc` key\n\n## Installation\n\n```bash\nnpm i @kouts/vue-simple-dropdown\n```\n\n## Usage\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport SimpleDropdown from '@kouts/vue-simple-dropdown'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cSimpleDropdown class=\"inline\" popper-class=\"w-64 bg-white border rounded-lg shadow-md\"\u003e\n    \u003c!-- Dropdown trigger --\u003e\n    \u003cbutton\n      class=\"dropdown-trigger inline-block px-6 py-3 bg-blue-600 text-white leading-tight rounded hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out\"\n    \u003e\n      Dropdown button\n    \u003c/button\u003e\n\n    \u003c!-- Dropdown content --\u003e\n    \u003ctemplate #popper=\"{ hide }\"\u003e\n      \u003cul class=\"py-1 text-sm text-gray-70\"\u003e\n        \u003cli\u003e\n          \u003ca href=\"#\" class=\"block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none\" @click=\"hide\"\u003e\n            Action (closes dropdown)\n          \u003c/a\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n          \u003ca href=\"#\" class=\"block py-2 px-4 hover:bg-gray-100 focus:bg-gray-100 outline-none\"\u003eAnother action\u003c/a\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/template\u003e\n  \u003c/SimpleDropdown\u003e\n\u003c/template\u003e\n```\n\n## Styling\n`vue-simple-dropdown` does not include any styling. You can use vanilla CSS or your favorite CSS framework to style it.  \nBy default it sets the `floating-vue` `Dropdown` theme to `simple-dropdown` and hides the dropdown `arrow`.  \nThe `Dropdown` arrow can be enabled by passing a different `theme` `prop`, e.g `theme=\"my-theme\"`.\n\n## Props\n\n`vue-simple-dropdown` inherits **all** `props` from [floating-vue Dropdown](https://floating-vue.starpad.dev/api/#component-props)  \nand sets some defaults:\n\n- `distance: 14`\n- `triggers: ['click']`\n- `theme: \"simple-dropdown\"`\n- `placement: \"bottom-start\"`\n- `autoHide: true`\n\nIt also **adds** some `props` on top:\n\n| Name | Type | Description | Default\n| :--- | :--- | :--- | :--- |\n| enableArrowNavigation | boolean | Enables/disables the arrow navigation feature | true |\n| itemSelector | string | The dropdown item selector for the arrow navigation | `li \u003e a:not(.disabled):not(:disabled)` |\n\n## Slots\n\n`vue-simple-dropdown` inherits **all** `slots` from [floating-vue Dropdown](https://floating-vue.starpad.dev/api/#component-slots)  \n\n## Events\n\n`vue-simple-dropdown` inherits **all** `events` from [floating-vue Dropdown](https://floating-vue.starpad.dev/api/#component-events)  \n\n# Development\n\nIn order to start development:\n\n```sh\nnpm i\nnpm run dev","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkouts%2Fvue-simple-dropdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkouts%2Fvue-simple-dropdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkouts%2Fvue-simple-dropdown/lists"}