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.1 (11/05/2020)
- fixed CSS naming convention
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