Props

dock

The dock property can be used to set the default dock position.

type: String

Allowed Positions
TOP
RIGHT
BOTTOM
LEFT

TOP is the default docking position when this prop is not set.

The following snippet docks the menubar to the right.

  <vue-dock-menu dock="RIGHT">
  </vue-dock-menu>

draggable

Use this property to enable or disable dragging. Dragging is enabled by default.

type: Boolean

The below snippet disables dragging on the Menubar.

  <vue-dock-menu :draggable="false">
  </vue-dock-menu>

items

Use the items prop to populate the menu. items should be a collection of MenuItem type.

type: Array of MenuItem

<template>
  <vue-dock-menu :items="items">
  </vue-dock-menu>
</template>

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

  export default {
    name: "example",
    components: {
      DockMenu
    },
    data() {
      return {
        items = [
          {
            name: "File",
            menu: [{ name: "Open"}, {name: "New Window"}, {name: "Exit"}]
          },
          {
            name: "Edit",
            menu: [{ name: "Cut"}, {name: "Copy"}, {name: "Paste"}]
          }
        ]
      }
    }
  }
</script>

on-selected

Use the on-selected callback to fetch the selected item.

The callback receives an object with name and path properties.

• name - Name of the menu item.
• path - Full path of the selected item.

The callback

<template>
  <vue-dock-menu :items="items" :on-selected="onSelected">
  </vue-dock-menu>
</template>

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

  export default {
    name: "example",
    components: {
      DockMenu
    },
    setup() {
      const onSelected = (data) => {
        console.log(data);
      }
      return  {
        onSelected
      }
    },
    data() {
      return {
        items = [
          {
            name: "File",
            menu: [{ name: "Open"}, {name: "New Window"}, {name: "Exit"}]
          },
        ]
      }
    }
  }
</script>

sidebarWidth

type: String

Controls the width of the sidebar (when docked LEFT or RIGHT).

<vue-dock-menu :items="items" :sidebar-width="300px">
</vue-dock-menu>