Floating Menu Component For Vue App

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:

Floating Menu Component For Vue App

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

You Might Be Interested In:

Add Comment