Sets or gets the jqxListMenu's alwaysShowNavigationArrows property. The alwaysShowNavigationArrows specifies whether navigation arrows are displayed for all items.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :alwaysShowNavigationArrows="true">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the animation's type.

'slide'

'fade'

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :animationType="'fade'" :animationDuration="1000">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the animation duration in milliseconds.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :animationDuration="500">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets whether auto separators will be generated. Separator is generated for a sequence of list items with equal start character. The property is possible to be set through the attribute data-auto-separators="true".

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :autoSeparators="true">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the BackButton's label.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :backLabel="'Back Button'">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the jqxListMenu's disabled property.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :disabled="true">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

When the jqxListMenu is created with the enableScrolling property set to true, vertical scrollbar automatically appears, if the items overflow the visible area. In order to use this feature, the following files should be included: jqxpanel.js and jqxscrollbar.js.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :enableScrolling="false">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Used for filtering the jqxListMenu using the filter input.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :showFilter="true" :filterCallback="filterCallback">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    },
    methods: {
      filterCallback: function (text, searchValue) {
        return text.toString().toLowerCase().indexOf(searchValue.toLowerCase()) >= 0;
      }
    }
  }
</script>

Sets or gets the jqxListMenu's height.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :height="500">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the animation duration of the header. Header of a listmenu could be set whether the data-role attribute of a list item is set to 'header'.

<template>
  <JqxListMenu ref="myListMenu" 
    :width="300" :headerAnimationDuration="500"> 
    <ul data-role="listmenu"> 
      <li> 
        OSI
        <ul data-role="listmenu">
          <li data-role="header">
            Application Layer
            <ol data-role="listmenu">
              <li>SIP</li>
              <li>DNS</li> 
            </ol>
          </li> 
          <li> 
            Presentation Layer 
            <ol data-role="listmenu"> 
              <li>SSL</li>
              <li>TLS</li> 
            </ol>
          </li> 
          <li> 
            Session Layer 
            <ol data-role="listmenu"> 
              <li>NetBIOS</li>
              <li>SPDY</li> 
            </ol>
          </li> 
        </ul>
      </li>
      <li> 
        TCP/IP 
        <ul data-role="listmenu"> 
          <li> 
            Application layer 
            <ol data-role="listmenu"> 
              <li>DHCP</li> 
              <li>DNS</li> 
              <li>FTP</li> 
            </ol> 
          </li>
          <li>
            Transport layer
            <ol data-role="listmenu">
              <li>TCP</li>
              <li>UDP</li>
              <li>SCTP</li> 
            </ol> 
          </li> 
          <li> 
            Internet layer 
            <ol data-role="listmenu">
              <li>IP</li>
              <li>ICMP</li>
              <li>ECN</li>
            </ol>
          </li>
        </ul>
      </li>
    </ul>
  </JqxListMenu> 
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue'; 
 
  export default {
    components: {
      JqxListMenu
    },
    methods: {
      filterCallback: function (text, searchValue) {
        return text.toString().toLowerCase().indexOf(searchValue.toLowerCase()) >= 0;
      }
    }
  }
</script>

Sets or gets the filter input field's place holder.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :showFilter="true" :placeHolder="'Search items...'">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets whether the list will be read-only. In readOnly mode, items are not clickable.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :readOnly="true">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

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

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :rtl="true">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the jqxListMenu's roundedCorners property.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :roundedCorners="false">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the jqxListMenu's showNavigationArrows property. The showNavigationArrows specifies whether navigation arrows are displayed only for list items with nested Lists

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :showNavigationArrows="false">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets whether the filter input field is visible.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :showFilter="true">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets whether the header will be visible.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :showHeader="false">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Indicates whether the back button will be visible.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300" :showBackButton="false">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</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>
  <JqxListMenu ref="myListMenu"
    :width="300" :theme="'material'">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Sets or gets the jqxListMenu's width.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    }
  }
</script>

Navigates to the previous page.

<template>
  <div>
    <JqxListMenu ref="myListMenu"
           :width="300">
      <ul data-role="listmenu">
        <li>
          OSI
          <ul data-role="listmenu">
            <li>
              Application Layer
              <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
              </ol>
            </li>
            <li>
              Presentation Layer
              <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
              </ol>
            </li>
            <li>
              Session Layer
              <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
              </ol>
            </li>
          </ul>
        </li>
        <li>
          TCP/IP
          <ul id="tcp" data-role="listmenu">
            <li>
              Application layer
              <ol data-role="listmenu">
                <li>DHCP</li>
                <li>DNS</li>
                <li>FTP</li>
              </ol>
            </li>
            <li>
              Transport layer
              <ol data-role="listmenu">
                <li>TCP</li>
                <li>UDP</li>
                <li>SCTP</li>
              </ol>
            </li>
            <li>
              Internet layer
              <ol data-role="listmenu">
                <li>IP</li>
                <li>ICMP</li>
                <li>ECN</li>
              </ol>
            </li>
          </ul>
        </li>
      </ul>
    </JqxListMenu>
    <JqxButton style="margin-top: 20px" :width="60" @click="back()">Go Back</JqxButton>
  </div>
</template>
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxListMenu,
      JqxButton
    },
    methods: {
      back: function () {
        this.$refs.myListMenu.back();
      }
    }   
  }
</script>

Sets the displayed page. The page could be set using a selector or object. The page must be a child of the current list and it's data-role must be set to "listmenu".

<template>
  <JqxListMenu ref="myListMenu"
         :width="300">
    <ul data-role="listmenu">
      <li>
        OSI
        <ul data-role="listmenu">
          <li>
            Application Layer
            <ol data-role="listmenu">
              <li>SIP</li>
              <li>DNS</li>
            </ol>
          </li>
          <li>
            Presentation Layer
            <ol data-role="listmenu">
              <li>SSL</li>
              <li>TLS</li>
            </ol>
          </li>
          <li>
            Session Layer
            <ol data-role="listmenu">
              <li>NetBIOS</li>
              <li>SPDY</li>
            </ol>
          </li>
        </ul>
      </li>
      <li>
        TCP/IP
        <ul id="tcp" data-role="listmenu">
          <li>
            Application layer
            <ol data-role="listmenu">
              <li>DHCP</li>
              <li>DNS</li>
              <li>FTP</li>
            </ol>
          </li>
          <li>
            Transport layer
            <ol data-role="listmenu">
              <li>TCP</li>
              <li>UDP</li>
              <li>SCTP</li>
            </ol>
          </li>
          <li>
            Internet layer
            <ol data-role="listmenu">
              <li>IP</li>
              <li>ICMP</li>
              <li>ECN</li>
            </ol>
          </li>
        </ul>
      </li>
    </ul>
  </JqxListMenu>
</template>
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
  export default {
    components: {
      JqxListMenu
    },
    mounted: function () {
      this.$refs.myListMenu.changePage('#tcp');
    }
  }
</script>

Destroys the widget.

<template>
  <JqxListMenu ref="myListMenu"
    :width="300">
    <ul data-role="listmenu">
      <li>OSI
        <ul data-role="listmenu">
          <li>Application Layer
            <ol data-role="listmenu">
                <li>SIP</li>
                <li>DNS</li>
            </ol>
          </li>
          <li>Presentation Layer
            <ol data-role="listmenu">
                <li>SSL</li>
                <li>TLS</li>
            </ol>
          </li>
          <li>Session Layer
            <ol data-role="listmenu">
                <li>NetBIOS</li>
                <li>SPDY</li>
            </ol>
          </li> 
        </ul>
    </li>
    <li>TCP/IP
      <ul data-role="listmenu">
        <li>Application layer
          <ol data-role="listmenu">
            <li>DHCP</li>
            <li>DNS</li>
            <li>FTP</li>
          </ol>
        </li>
        <li>Transport layer
          <ol data-role="listmenu">
            <li>TCP</li>
            <li>UDP</li>
            <li>SCTP</li>
          </ol>
        </li>
        <li>Internet layer
          <ol data-role="listmenu">
            <li>IP</li>
            <li>ICMP</li>
            <li>ECN</li>
          </ol>
        </li>
      </ul>
    </li>
  </ul>
  </JqxListMenu>
</template>
 
<script>
  import JqxListMenu from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxlistmenu.vue';
 
  export default {
    components: {
      JqxListMenu
    },
    mounted: function () {
      this.$refs.myListMenu.destroy();
    }
  }
</script>