Description:
A Vue.js component to create a draggable, customizable, multi-level, keyboard accessible floating menu on the Vue.js app.
How to use it:
1. Import the component and its stylesheet.
import { FloatMenu } from "vue-float-menu"; import "vue-float-menu/dist/vue-float-menu.css";
2. Register the component.
export default { components: { FloatMenu, } // ... };
3. Add the floating menu to the template.
<float-menu :menu-data="items" :on-selected="handleSelection" > Drag </float-menu>
4. Setup the floating menu and define the nested menu data as follows:
export default { components: { FloatMenu, }, setup() { const handleSelection = (selectedItem: string) => { console.log(selectedItem); }; return { handleSelection, }; }, data() { return { items: [ { name: "Home" }, { name: "Category", subMenu: { name: "JavaScript", items: [ { name: "React" }, { name: "Vue" } ], }, }, { name: "Contact" }, { name: "About", } ], }; }, };
5. Possible component props to config the floating menu.
/** * dimension of the menu head. sets both the width and height * * @type {number} */ dimension: { type: Number, default: 45, }, /** * sets the initial position of the menu. * * @type {string} */ position: { type: String, default: "bottom right", }, /** * disables dragging and sets the position to fixed. * * @type {boolean} */ fixed: { type: Boolean, default: false, }, /** * sets the height and width of the menu. * * @type {Object} */ menuDimension: { type: Object as PropType<{ height: number; width: number }>, default: { height: 250, width: 250, }, }, /** * data to generate the menu. array of type MenuItem * * @type {array} */ menuData: { type: Array as PropType<MenuItem[]>, default: [], }, useCustomContent: { type: Boolean, default: false, }, /** * hook that gets called on selection of the menu item. * * @type {function} */ onSelected: { type: Function as PropType<(val: string) => void>, default: null, }, /** * flips the content of the menu on the right edges of the screen * * @type {boolean} */ flipOnEdges: { type: Boolean, default: false, }, /** * theme object. * * @type {boolean} */ theme: { type: Object as PropType<{ /** * targets the bg color of the menu head and selection highlight for sub menus. * * @type {string} */ primary: string; /** * targets the text color * * @type {string} */ textColor: string; /** * targets the background color of the menu * * @type {string} */ menuBgColor: string; /** * targets the text color of the menu item when the item has a sub menu * * @type {string} */ textSelectedColor: string; }>, required: false, default: { primary: "#0080ff", textColor: "#000", menuBgColor: "#fff", textSelectedColor: "#fff", }, },
Preview:
Changelog:
v1.9.0 (12/13/2020)
- support for icons
v1.8.2 (12/05/2020)
- Fixed a keyboard accessibility issue. (using right arrow behaves weirdly).
v1.8.0 (11/25/2020)
- Restrict drag movement around the screen edges.
- Support for adding a new divider in between the menu items.
v1.7.6 (11/21/2020)
- removed interactjs. drag n drop is completely managed by the lib itself
- reduced final build size
v1.7.3 (11/18/2020)
- Add menu selection highlight for slide-out mode
v1.7.1 (11/17/2020)
- Introducing two new modes (slide-out and accordion) slide-out will be the default mode. accordion is introduced to handle mobile use cases.
- Menu handle will now snap back to its original position on the screen edges.
- removed nanoid.
Download Details:
Author: prabhuignoto
Live Demo: https://codesandbox.io/s/vue-float-menu-e09z4?fontsize=14&hidenavigation=1&theme=dark
Download Link: https://github.com/prabhuignoto/vue-float-menu/archive/master.zip
Official Website: https://github.com/prabhuignoto/vue-float-menu
Install & Download:
# Yarn
$ yarn add vue-float-menu
# NPM
$ npm i vue-float-menu --save