{"id":13407005,"url":"https://github.com/prabhuignoto/vue-float-menu","last_synced_at":"2025-04-09T07:01:38.109Z","repository":{"id":37435341,"uuid":"286817876","full_name":"prabhuignoto/vue-float-menu","owner":"prabhuignoto","description":"🎈Customizable floating menu for Vue","archived":false,"fork":false,"pushed_at":"2023-07-19T14:01:17.000Z","size":10707,"stargazers_count":575,"open_issues_count":8,"forks_count":31,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-02T05:14:51.443Z","etag":null,"topics":["composition-api","drag-menu","float-menu","menu","nested-menus","typescript","vue","vue-component","vue-menu","vue3"],"latest_commit_sha":null,"homepage":"https://vue-float-menu.prabhuignoto.vercel.app","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/prabhuignoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":"prabhuignoto","ko_fi":"prabhuignoto","custom":["paypal.me/prabhuignoto","https://www.buymeacoffee.com/prabhuignoto"]}},"created_at":"2020-08-11T18:21:33.000Z","updated_at":"2025-03-28T11:42:18.000Z","dependencies_parsed_at":"2024-01-15T17:39:22.049Z","dependency_job_id":"c86ebe42-0386-445f-a51c-49bb332eb9c1","html_url":"https://github.com/prabhuignoto/vue-float-menu","commit_stats":{"total_commits":230,"total_committers":5,"mean_commits":46.0,"dds":0.06521739130434778,"last_synced_commit":"a7df100c5ddecc93ca1dd72ec6b07bd3e9bdc670"},"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-float-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-float-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-float-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Fvue-float-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prabhuignoto","download_url":"https://codeload.github.com/prabhuignoto/vue-float-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994118,"owners_count":21030050,"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":["composition-api","drag-menu","float-menu","menu","nested-menus","typescript","vue","vue-component","vue-menu","vue3"],"created_at":"2024-07-30T19:02:45.565Z","updated_at":"2025-04-09T07:01:38.062Z","avatar_url":"https://github.com/prabhuignoto.png","language":"Vue","funding_links":["https://github.com/sponsors/prabhuignoto","https://ko-fi.com/prabhuignoto","paypal.me/prabhuignoto","https://www.buymeacoffee.com/prabhuignoto"],"categories":["Packages","Vue"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./readme-assets/social-media-logo-small.png\"\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\n[![Build Status](https://dev.azure.com/prabhummurthy/float-menu/_apis/build/status/prabhuignoto.vue-float-menu?branchName=master)](https://dev.azure.com/prabhummurthy/float-menu/_build/latest?definitionId=9\u0026branchName=master)\n[![Maintainability](https://api.codeclimate.com/v1/badges/a591487451582a389126/maintainability)](https://codeclimate.com/github/prabhuignoto/float-menu/maintainability)\n[![DeepScan grade](https://deepscan.io/api/teams/10074/projects/13372/branches/223016/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=10074\u0026pid=13372\u0026bid=223016)\n[![DeepSource](https://deepsource.io/gh/prabhuignoto/vue-float-menu.svg/?label=active+issues)](https://deepsource.io/gh/prabhuignoto/vue-float-menu/?ref=repository-badge)\n![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/float-menu)\n![minified](https://badgen.net/bundlephobia/minzip/vue-float-menu)\n[![Depfu](https://badges.depfu.com/badges/3597df88718d346a7b41f08e31fe1331/overview.svg)](https://depfu.com/github/prabhuignoto/float-menu?project_id=15010)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./readme-assets/demo.gif\"\u003e\n\u003c/div\u003e\n\n\u003ch2\u003e✨ Features\u003c/h2\u003e\n\n- 👌 \u0026nbsp;[Drag](#-demo) and place the menu anywhere on screen.\n- 👓 The smart menu system detects the edges of the screen and flips the menu automatically.\n- 👍 Support for nested menus.\n- ⌨ Keyboard Accessible.\n- 🌈 Support for custom [themes](#-theme).\n- 💪 Built with [Typescript](https://www.typescriptlang.org/).\n- 🧰 Intuitive [API](#props) with data driven behavior.\n- 🌠 Built with the all new [Vue 3](https://v3.vuejs.org/).\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\n- [⚡ Installation](#-installation)\n- [🚀 Getting Started](#-getting-started)\n- [Props](#props)\n  - [Position](#position)\n  - [Menu head dimension](#menu-head-dimension)\n  - [Menu dimension](#menu-dimension)\n  - [Menu Style](#menu-style)\n  - [Populating the Menu](#populating-the-menu)\n  - [on-select](#on-select)\n  - [Flip on edges](#flip-on-edges)\n  - [Fixed Menu](#fixed-menu)\n  - [🎨 Custom icon](#-custom-icon)\n  - [🎭 Icon support](#-icon-support)\n  - [🌈 Theme](#-theme)\n- [📦 Build Setup](#-build-setup)\n- [🔨 Contributing](#-contributing)\n- [🧱 Built with](#-built-with)\n- [Notes](#notes)\n- [Meta](#meta)\n\n  - [Menu head dimension](#menu-head-dimension)\n  - [Menu dimension](#menu-dimension)\n  - [Menu Style](#menu-style)\n  - [Populating the Menu](#populating-the-menu)\n  - [on-select](#on-select)\n  - [Flip on edges](#flip-on-edges)\n  - [Fixed Menu](#fixed-menu)\n  - [🎨 Custom icon](#-custom-icon)\n  - [🌈 Theme](#-theme)\n\n- [📦 Build Setup](#-build-setup)\n- [🔨 Contributing](#-contributing)\n- [Built with](#built-with)\n- [Notes](#notes)\n- [Meta](#meta)\n\n## ⚡ Installation\n\n```sh\npnpm install vue-float-menu\n```\n\n## 🚀 Getting Started\n\nvue-float-menu has some great defaults. Please check the [props](#props) section for all available options.\n\n`vue-float-menu` finds the optimal menu orientation depending on the position of the menu. for e.g if the menu is placed at the bottom edge and the orientation set to `bottom`, the component will automatically flip the orientation to `top`.\n\nHere is a basic example that sets the default position of the menu as `top left`.\n\n```sh\n\u003ctemplate\u003e\n  \u003cfloat-menu\n    :position=\"'top left'\"\n    :dimension=\"50\"\n    :menu-data=\"items\"\n    :on-selected=\"handleSelection\"\n  \u003e\n    Drag\n  \u003c/float-menu\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { FloatMenu } from \"vue-float-menu\";\nimport \"vue-float-menu/dist/vue-float-menu.css\";\n\nexport default {\n  components: {\n    FloatMenu,\n  },\n  setup() {\n    const handleSelection = (selectedItem) =\u003e {\n      console.log(selectedItem);\n    };\n    return {\n      handleSelection,\n    };\n  },\n  data() {\n    return {\n      items: [\n        { name: \"New\" },\n        {\n          name: \"Edit\",\n          subMenu: {\n            name: \"edit-items\",\n            items: [{ name: \"Copy\" }, { name: \"Paste\" }],\n          },\n        },\n        {\n          name: \"Open Recent\"\n        },\n        {\n          name: \"Save\",\n        }\n      ],\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n## Props\n\n| Prop           | Type     | Description                                                                                                            |\n| -------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- |\n| dimension      | number   | dimension of the Menu Head `width x height` in pixels.                                                                 |\n| position       | String   | initial position of the Menu Head. can be any one of the values `top left`, `top right`, `bottom left`, `bottom right` |\n| fixed          | Boolean  | disables dragging and the menu will be fixed. use the `position` prop to fix the menu position                         |\n| menu-dimension | Object   | sets the `width` and `minimum` height of the Menu.                                                                     |\n| menu-data      | Object   | data to generate the menu. refer to [populating the menu](#populating-the-menu) for usage details.                     |\n| on-selected    | Function | hook that is called on selection.                                                                                      |\n| menu-style     | String   | can be `slide-out` or `accordion`.`slide-out` is the default menu style.                                               |\n| flip-on-edges  | Boolean  | flips the menu content on the right edges of the screen.                                                               |\n| theme          | Object   | prop to customize the color schemes. refer [theme](#theme) for usage.                                                  |\n\n### Position\n\nThe `position` prop can be used to set the initial position of the Menu Head. The prop can accept any one of the following values.\n\n- `top left` (default)\n- `top right`\n- `bottom left`\n- `bottom right`\n\n```sh\n  \u003cfloat-menu :dimension=50 position=\"bottom right\"\u003e\n    \u003ctemplate #icon\u003e\n      \u003cBoxIcon /\u003e\n    \u003c/template\u003e\n  \u003c/float-menu\u003e\n```\n\n### Menu head dimension\n\n`dimension` prop can be used to set the width and height of the menu head. The prop takes a single number value to set the height and width of the Menu Head.\n\n```sh\n  \u003cfloat-menu :dimension=50\u003e\n    \u003ctemplate #icon\u003e\n      \u003cBoxIcon /\u003e\n    \u003c/template\u003e\n  \u003c/float-menu\u003e\n```\n\n### Menu dimension\n\nprop to set the `height` and `width` of the menu.\n\n```sh\n  \u003cfloat-menu\n    :dimension=50\n    :menu-dimension=\"{height: 400, width: 300}\"\n    position=\"bottom right\"\n  \u003e\n    \u003ctemplate #icon\u003e\n      \u003cBoxIcon /\u003e\n    \u003c/template\u003e\n  \u003c/float-menu\u003e\n```\n\n### Menu Style\n\nThe component supports two modes `slide-out`(default) and `accordion`. The `accordion` style is more suitable for mobile devices.\n\n```sh\n  \u003cfloat-menu\n    position=\"bottom right\"\n    flip-on-edges\n    menu-style=\"accordion\"\n  \u003e\n    \u003ctemplate #icon\u003e\n      \u003cBoxIcon /\u003e\n    \u003c/template\u003e\n  \u003c/float-menu\u003e\n```\n\n![accordion](./readme-assets/accordion.png)\n\n### Populating the Menu\n\nUse the `menu-data` prop to create simple or nested menus of your liking. `menu-data` takes an array of `MenuItem` type\n\n`MenuItem` properties\n\n| property | description                    |\n| -------- | ------------------------------ |\n| name     | display name of the menu item. |\n| subMenu  | data for the sub-menu          |\n| disabled | disables the menu item         |\n| divider  | makes the item as a divider    |\n\nHere we create a simple Menu structure with 3 Menu items with no sub menus.\n\n```sh\nconst menuData = [\n  { name: \"New\" },\n  {\n    name: \"Edit\",\n    subMenu: {\n      name: \"edit-items\",\n      items: [{ name: \"Copy\" }, { name: \"Paste\", disabled: true }],\n    },\n  },\n  {divider: true},\n  {\n    name: \"Open Recent\",\n    subMenu: {\n      name: \"recent-items\",\n      items: [{ name: \"Document 1\" }, {divider: true}, { name: \"Document 2\" }],\n    },\n  },\n]\n```\n\n```sh\n  \u003cfloat-menu\n    :dimension=50\n    :menu-dimension=\"{height: 400, width: 300}\"\n    :menu-data=\"menuData\"\n    position=\"bottom right\"\n  \u003e\n    \u003cBoxIcon /\u003e\n  \u003c/float-menu\u003e\n```\n\n### on-select\n\nhook for the menu item selection event.\n\n```sh\n  \u003cfloat-menu\n    :dimension=50\n    position=\"bottom right\"\n    :menu-dimension=\"{height: 400, width: 300}\"\n    :menu-data=\"{items: [{name: 'File'}, {name: 'Open'}]}\"\n    on-select=\"handleSelection\"\n  \u003e\n    \u003cBoxIcon /\u003e\n  \u003c/float-menu\u003e\n```\n\n### Flip on edges\n\nsetting this prop `flips` the menu content on the right edges of the screen.\n\n```sh\n  \u003cfloat-menu\n    :dimension=50\n    position=\"bottom right\"\n    flip-on-edges\n    on-select=\"handleSelection\"\n  \u003e\n    \u003cBoxIcon /\u003e\n  \u003c/float-menu\u003e\n```\n\n![flip](./readme-assets/flip.png)\n\n### Fixed Menu\n\nTo disable dragging and to fix the position statically, set `fixed` to `true`. This prop is disabled by default. Use this prop along with the `position` prop to set the desired position.\n\n```sh\n  \u003cfloat-menu :dimension=50 position=\"bottom right\" fixed\u003e\n    \u003ctemplate #icon\u003e\n      \u003cBoxIcon /\u003e\n    \u003c/template\u003e\n  \u003c/float-menu\u003e\n```\n\n### 🎨 Custom icon\n\nTo customize the Menu Icon, simply pass any content in between the `float-menu` tags. Here we render a custom icon.\n\n```sh\n  \u003cfloat-menu\n    :dimension=50\n    :menu-data=\"menuData\"\n  \u003e\n    \u003ctemplate #icon\u003e\n      \u003cBoxIcon /\u003e\n    \u003c/template\u003e\n  \u003c/float-menu\u003e\n```\n\nand here we render a text `Click` inside the Menu handle\n\n```sh\n  \u003cfloat-menu\n    :dimension=50\n    :menu-data=\"menuData\"\n  \u003e\n    Click\n  \u003c/float-menu\u003e\n```\n\n![example2](./readme-assets/example2.png)\n\n### 🎭 Icon support\n\nEach menu item can be iconified and the component uses slots to inject the icons.\n\nPass individual icons (or images) as templates marked with a unique `slot id`. please make sure the `ids` match the `iconSlot` property in the items array.\n\n```sh\n\u003cfloat-menu\n  :menu-data=\"items\"\n\u003e\n  \u003ctemplate #new\u003e\n    \u003cimg\n      src=\"../assets/new.svg\"\n      alt=\"new\"\n    \u003e\n  \u003c/template\u003e\n  \u003ctemplate #edit\u003e\n    \u003cimg\n      src=\"../assets/edit.svg\"\n      alt=\"edit\"\n    \u003e\n  \u003c/template\u003e\n\u003c/float-menu\u003e\n\nexport default defineComponent({\n  name: \"MenuExample\",\n  data()  {\n    return {\n      items: [\n        { name: \"New File\", iconSlot: \"new\" },\n        { name: \"New Window\", iconSlot: \"edit\" },\n      ]\n    }\n  }\n})\n```\n\n![menu-icon](./readme-assets/menu-icon.png)\n\nThis works seamlessly even for `nested` menu structure. Make sure the `slot ids` match and the component will render the icons appropriately.\n\n```sh\n\u003cfloat-menu\n  :menu-data=\"items\"\n\u003e\n  \u003ctemplate #cut\u003e\n    \u003cimg\n      src=\"../assets/window-maximize.svg\"\n      alt=\"cut\"\n    \u003e\n  \u003c/template\u003e\n\u003c/float-menu\u003e\n\nexport default defineComponent({\n  name: \"MenuExample\",\n  data()  {\n    return {\n      items: [\n        { name: \"edit\",\n        subMenu: [{ name: \"cut\", iconSlot: \"cut\" }]},\n      ]\n    }\n  }\n});\n```\n\n### 🌈 Theme\n\nCustomize the color schemes with the `theme` prop.\n\n```sh\n  \u003cfloat-menu\n    :dimension=50\n    :theme=\"{\n      primary: '#00539C',\n      textColor: '#000',\n      menuBgColor: '#fff',\n      textSelectedColor: '#fff',\n    }\"\n  \u003e\n    Click\n  \u003c/float-menu\u003e\n```\n\n## 📦 Build Setup\n\n```bash\n# install dependencies\npnpm install\n\n# start dev\npnpm run dev\n\n# run css linting\npnpm run lint:css\n\n# lint everything\npnpm run lint:all\n\n# package lib\nnpm run rollup\n```\n\n## 🔨 Contributing\n\n1. Fork it ( [https://github.com/prabhuignoto/vue-float-menu/fork](https://github.com/prabhuignoto/vue-float-menu/fork) )\n2. Create your feature branch (`git checkout -b new-feature`)\n3. Commit your changes (`git commit -am 'Add feature'`)\n4. Push to the branch (`git push origin new-feature`)\n5. Create a new Pull Request\n\n## 🧱 Built with\n\n- [Vue.JS](vue) - The Component is written in Vue + [Typescript](typescript).\n\n## Notes\n\n- The project uses [vite](vite) instead of @vue/cli. I choose vite for speed and i also believe [vite](vite) will be the future.\n\n## Meta\n\nPrabhu Murthy – [@prabhumurthy2](https://twitter.com/prabhumurthy2) – prabhu.m.murthy@gmail.com\n\n[https://www.prabhumurthy.com](https://www.prabhumurthy.com)\n\nDistributed under the MIT license. See `LICENSE` for more information.\n\n[https://github.com/prabhuingoto/](https://github.com/prabhuignoto/)\n\n\u003c!-- Markdown link \u0026 img dfn's --\u003e\n\n[vue]: https://vuejs.org\n[typescript]: https://typescriptlang.org\n[vite]: https://github.com/vitejs/vite\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Fvue-float-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprabhuignoto%2Fvue-float-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Fvue-float-menu/lists"}