Vue.js Draggable Floating Navigation Menubar With Submenu Items List Using vue-float-menu Library in Typescript Full Project For Beginners

Vue.js Draggable Floating Navigation Menubar With Submenu Items List Using vue-float-menu Library in Typescript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a draggable floating navigation menubar with submenu items list using vue-float-menu library in typescript. All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to install the below library using the npm command as shown below

 

npm i vue-float-menu

 

 

For all the images and javascript files you can download the full github repository as shown below

 

DOWNLOAD SOURCE CODE

 

After downloading it the directory structure will look something like this

 

 

Features

  • 👌  Drag and place the menu anywhere on screen.
  • 👓 The smart menu system detects the edges of the screen and flips the menu automatically.
  • 👍 Support for nested menus.
  • ⌨ Keyboard Accessible.
  • 🌈 Support for custom themes.
  • 💪 Built with Typescript.
  • 🧰 Intuitive API with data driven behavior.
  • 🌠 Built with the all new Vue 3.
See also  Build Anonymous Random P2P WebRTC Zoom Clone Video Chat in Mobile Using Node.js Socket.io & Vue.js in Javascript Full Project For Beginners

 

 

 Getting Started

 

 

top left float menubar example

 

 

<template>
  <float-menu
    :position="'top left'"
    :dimension="50"
    :menu-data="items"
    :on-selected="handleSelection"
  >
    Drag
  </float-menu>
</template>

<script>
import { FloatMenu } from "vue-float-menu";
import "vue-float-menu/dist/vue-float-menu.css";

export default {
  components: {
    FloatMenu,
  },
  setup() {
    const handleSelection = (selectedItem) => {
      console.log(selectedItem);
    };
    return {
      handleSelection,
    };
  },
  data() {
    return {
      items: [
        { name: "New" },
        {
          name: "Edit",
          subMenu: {
            name: "edit-items",
            items: [{ name: "Copy" }, { name: "Paste" }],
          },
        },
        {
          name: "Open Recent"
        },
        {
          name: "Save",
        }
      ],
    };
  },
};
</script>

 

 

 

Props

Prop Type Description
dimension number dimension of the Menu Head width x height in pixels.
position String initial position of the Menu Head. can be any one of the values top lefttop rightbottom leftbottom right
fixed Boolean disables dragging and the menu will be fixed. use the position prop to fix the menu position
menu-dimension Object sets the width and minimum height of the Menu.
menu-data Object data to generate the menu. refer to populating the menu for usage details.
on-selected Function hook that is called on selection.
menu-style String can be slide-out or accordion.slide-out is the default menu style.
flip-on-edges Boolean flips the menu content on the right edges of the screen.
theme Object prop to customize the color schemes. refer theme for usage.
See also  Build a Vue.js Piano Music MP3 Keyboard Player and Recorder in Browser Using Vanilla Javascript Full Project For Beginners

 

 

Icon Support

 

 

<float-menu
  :menu-data="items"
>
  <template #new>
    <img
      src="../assets/new.svg"
      alt="new"
    >
  </template>
  <template #edit>
    <img
      src="../assets/edit.svg"
      alt="edit"
    >
  </template>
</float-menu>

export default defineComponent({
  name: "MenuExample",
  data()  {
    return {
      items: [
        { name: "New File", iconSlot: "new" },
        { name: "New Window", iconSlot: "edit" },
      ]
    }
  }
})

 

 

 

Live Demo

 

 

Vue.js Draggable Floating Menubar

 

Leave a Reply