Floating Menu Component For Vue App

Install & Download:

# Yarn
$ yarn add vue-float-menu
# NPM
$ npm i vue-float-menu --save

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.