Sets or gets the duration of the show animation.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :animationShowDuration="3000">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the duration of the hide animation.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :animationHideDuration="3000">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the delay before the start of the hide animation.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :animationHideDelay="3000">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the delay before the start of the show animation.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :animationShowDelay="300">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the time interval after which all opened items will be closed. When you open a new sub menu, the interval is cleared. If you want to disable this automatic closing behavior of the jqxMenu, you need to set the autoCloseInterval property to 0.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :autoCloseInterval="300">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Auto-Sizes the jqxMenu's main items when the menu's mode is 'horizontal'.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :autoSizeMainItems="false">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Automatically closes the opened popups after a click.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :autoCloseOnClick="false">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Opens the Context Menu when the right-mouse button is pressed. When this property is set to false, the Open and Close functions can be used to open and close the Context Menu.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :autoOpenPopup="false">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Opens the top level menu items when the user hovers them.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :autoOpen="false">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

<template>
  <JqxMenu ref="myMenu"
    :width="400" :autoCloseOnMouseLeave="false">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Opens an item after a click by the user.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :clickToOpen="true">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Enables or disables the jqxMenu.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :disabled="true">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Enables or disables the hover state.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :enableHover="false">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the animation's easing to one of the JQuery's supported easings.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :easing="'linear'">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the jqxMenu's height.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :height="30">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Enables or disables the jqxMenu's keyboard navigation.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :keyboardNavigation="true">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the jqxMenu's minimizeWidth. That width determines the minimum browser window's width when the Menu will switch from normal to minimized mode and the Menu's width is in percentages. Set it to null, if you want to disable that behavior. Note: jqxMenu automatically switches to minimized mode, when it is displayed on a touch device. By setting the property to null, you will disable that behavior, too.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :minimizeWidth="450">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the menu's display mode.

Possible Values:

'horizontal'

'vertical'

'popup'

<template>
  <JqxMenu ref="myMenu"
    :width="400" :mode="'vertical'">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the popup's z-index.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :popupZIndex="99999">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or getsa value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :rtl="true">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

<template>
  <JqxMenu ref="myMenu"
    :width="400" :showTopLevelArrows="true">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Specifies the jqxMenu's data source. Use this property to populate the jqxMenu.

• label - item's label.
• value - item's value.
• html - item's html. The html to be displayed in the item.
• id - item's id.
• items - array of sub items.
• subMenuWidth - sets the sub menu's width.
• disabled - determines whether the item is enabled/disabled.

<template>
  <JqxMenu ref="myMenu" :width="200" :source="source" :mode="'vertical'"/> 
</template>
 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    },
    data: function () {
      return {
        source: [
          { 
            label: "Mail",
            items: [
               { label: "Calendar" },
               { label: "Contacts" }
             ]
           },
           {
             label: "Inbox",
             items: [
               { label: "Admin" },
               { label: "Corporate" },
               { label: "Finance" },
               { label: "Other" }             
             ]
           },
           { label: "Deleted Items" }
         ]
       }
     }
   } 
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxMenu ref="myMenu"
    :width="400" :theme="'material'">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

Sets or gets the jqxMenu's width.

<template>
  <JqxMenu ref="myMenu"
    :width="400">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    }
  }
</script>

This event is triggered when any of the jqxMenu Sub Menus is closed.

Code examples

Bind to the closed event of jqxMenu.

<template>
  <JqxMenu ref="myMenu" @closed="onClosed($event)"
    :width="400">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    },
    methods: {
      onClosed: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a menu item is clicked.

Code examples

Bind to the itemclick event of jqxMenu.

<template>
  <JqxMenu ref="myMenu" @itemclick="onItemclick($event)"
    :width="400">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    },
    methods: {
      onItemclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when any of the jqxMenu Sub Menus is displayed.

Code examples

Bind to the shown event of jqxMenu.

<template>
  <JqxMenu ref="myMenu" @shown="onShown($event)"
    :width="400">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    },
    methods: {
      onShown: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Closes a menu item.

<template>
  <div>
    <JqxMenu ref="myMenu"
         :width="400" :autoCloseOnMouseLeave="false">
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li id="products">
          Products
          <ul>
            <li>
              New
              <ul>
                <li>Corporate Use</li>
                <li>Private Use</li>
              </ul>
            </li>
            <li>Featured</li>
          </ul>
        </li>
        <li>Events</li>
      </ul>
    </JqxMenu>
    <JqxButton :width="100" @click="open()">Open Products</JqxButton>
    <JqxButton :width="100" @click="close()">Close Products</JqxButton>
  </div>
</template>
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxMenu,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myMenu.openItem("products");
      },
      close: function () {
        this.$refs.myMenu.closeItem("products");
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 50px;
    margin-right: 20px;
  }
</style>

Closes the menu (only in context menu mode).

<template>
  <div>
    <div @contextmenu="contextmenuMenu($event)"
       style="vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;">
      <JqxMenu ref="jqxMenu"
           :mode="'popup'"
           :autoOpenPopup="false"
           :width="120"
           :height="140">
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>
            Products
            <ul>
              <li>
                New
                <ul>
                  <li>Corporate Use</li>
                  <li>Private Use</li>
                </ul>
              </li>
              <li>Featured</li>
            </ul>
          </li>
          <li>Events</li>
        </ul>
      </JqxMenu>
      <span style="font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;">
        Context Menu will open here
      </span>
    </div>
    <JqxButton @click="open()">Open Menu</JqxButton>
    <JqxButton @click="close()">Close Menu</JqxButton>
  </div>
</template>
<script>
  import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
  import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
  export default {
    components: {
      JqxMenu,
      JqxButton
    },
    methods: {
      contextmenuMenu: function (e) {
        e.preventDefault();
      },
      open: function (event) {
        this.$refs.jqxMenu.open(100, 100);
      },
      close: function (event) {
        this.$refs.jqxMenu.close();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Disables or enables a menu item. The method has two parameters - HTML Element ID and a boolean value which determines whether to disable or enable the element.

<template>
  <div>
    <JqxMenu ref="myMenu"
         :width="400" :autoCloseOnMouseLeave="false">
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li id="products">
          Products
          <ul>
            <li>
              New
              <ul>
                <li>Corporate Use</li>
                <li>Private Use</li>
              </ul>
            </li>
            <li>Featured</li>
          </ul>
        </li>
        <li>Events</li>
      </ul>
    </JqxMenu>
    <JqxButton :width="100" @click="open()">Disable Products</JqxButton>
    <JqxButton :width="100" @click="close()">Enable Products</JqxButton>
  </div>
</template>
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxMenu,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myMenu.disable("products", true);
      },
      close: function () {
        this.$refs.myMenu.disable("products", false);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 50px;
    margin-right: 20px;
  }
</style>

Destroys the widget.

<template>
  <JqxMenu ref="myMenu"
    :width="400">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    },
    mounted: function () {
      this.$refs.myMenu.destroy();
    }
  }
</script>

Focuses the widget.

<template>
  <JqxMenu ref="myMenu"
    :width="400">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li>Products
        <ul>
          <li>New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
   </ul>
  </JqxMenu>
</template>

 
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
 
  export default {
    components: {
      JqxMenu
    },
    mounted: function () {
      this.$refs.myMenu.focus();
    }
  }
</script>

Minimizes the widget.

<template>
  <div>
    <JqxMenu ref="myMenu"
         :width="400">
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li id="products">
          Products
          <ul>
            <li>
              New
              <ul>
                <li>Corporate Use</li>
                <li>Private Use</li>
              </ul>
            </li>
            <li>Featured</li>
          </ul>
        </li>
        <li>Events</li>
      </ul>
    </JqxMenu>
    <JqxButton :width="100" @click="minimize()">Minimize</JqxButton>
    <JqxButton :width="100" @click="restore()">Restore</JqxButton>
  </div>
</template>
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxMenu,
      JqxButton
    },
    methods: {
      minimize: function () {
        this.$refs.myMenu.minimize();
      },
      restore: function () {
        this.$refs.myMenu.restore();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 50px;
    margin-right: 20px;
  }
</style>

Opens the menu(only in context menu mode).

<template>
  <div>
    <div @contextmenu="contextmenuMenu($event)"
       style="vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;">
      <JqxMenu ref="jqxMenu"
           :mode="'popup'"
           :autoOpenPopup="false"
           :width="120"
           :height="140">
        <ul>
          <li>Home</li>
          <li>About Us</li>
          <li>
            Products
            <ul>
              <li>
                New
                <ul>
                  <li>Corporate Use</li>
                  <li>Private Use</li>
                </ul>
              </li>
              <li>Featured</li>
            </ul>
          </li>
          <li>Events</li>
        </ul>
      </JqxMenu>
      <span style="font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;">
        Context Menu will open here
      </span>
    </div>
    <JqxButton @click="open()">Open Menu</JqxButton>
    <JqxButton @click="close()">Close Menu</JqxButton>
  </div>
</template>
<script>
  import JqxMenu from "jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue";
  import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";
  export default {
    components: {
      JqxMenu,
      JqxButton
    },
    methods: {
      contextmenuMenu: function (e) {
        e.preventDefault();
      },
      open: function (event) {
        this.$refs.jqxMenu.open(100, 100);
      },
      close: function (event) {
        this.$refs.jqxMenu.close();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Opens a menu item

<template>
  <div>
    <JqxMenu ref="myMenu"
         :width="400" :autoCloseOnMouseLeave="false">
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li id="products">
          Products
          <ul>
            <li>
              New
              <ul>
                <li>Corporate Use</li>
                <li>Private Use</li>
              </ul>
            </li>
            <li>Featured</li>
          </ul>
        </li>
        <li>Events</li>
      </ul>
    </JqxMenu>
    <JqxButton :width="100" @click="open()">Open Products</JqxButton>
    <JqxButton :width="100" @click="close()">Close Products</JqxButton>
  </div>
</template>
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxMenu,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myMenu.openItem("products");
      },
      close: function () {
        this.$refs.myMenu.closeItem("products");
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 50px;
    margin-right: 20px;
  }
</style>

Restores the widget from the "minimized" state.

<template>
  <div>
    <JqxMenu ref="myMenu"
         :width="400">
      <ul>
        <li>Home</li>
        <li>About Us</li>
        <li id="products">
          Products
          <ul>
            <li>
              New
              <ul>
                <li>Corporate Use</li>
                <li>Private Use</li>
              </ul>
            </li>
            <li>Featured</li>
          </ul>
        </li>
        <li>Events</li>
      </ul>
    </JqxMenu>
    <JqxButton :width="100" @click="minimize()">Minimize</JqxButton>
    <JqxButton :width="100" @click="restore()">Restore</JqxButton>
  </div>
</template>
<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxMenu,
      JqxButton
    },
    methods: {
      minimize: function () {
        this.$refs.myMenu.minimize();
      },
      restore: function () {
        this.$refs.myMenu.restore();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 50px;
    margin-right: 20px;
  }
</style>

Sets the item's popup open direction

<template>
  <JqxMenu style="margin-top: 80px;" ref="myMenu"
       :width="400">
    <ul>
      <li>Home</li>
      <li>About Us</li>
      <li id="products">
        Products
        <ul>
          <li>
            New
            <ul>
              <li>Corporate Use</li>
              <li>Private Use</li>
            </ul>
          </li>
          <li>Featured</li>
        </ul>
      </li>
      <li>Events</li>
    </ul>
  </JqxMenu>
</template>

<script>
  import JqxMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxmenu.vue';

  export default {
    components: {
      JqxMenu
    },
    mounted: function () {
      this.$refs.myMenu.setItemOpenDirection('products', 'left', 'up');
    }
  }
</script>