Defines the layout of the widget's elements. Each Array item should be a Percentage Value and the total should be "100%".

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :columns="columns">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    },
    data: function () {
      return {
        columns: ['30%', '40%', '30%']
      }
    }
  }
</script>

Enables/disables the navbar.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :disabled="true">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Sets or gets the NavBar's height.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Defines whether the NavBar is minimized.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :minimized="true">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Defines the position of the Toggle Button in the minimized state.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :minimized="true" :minimizeButtonPosition="'right'">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Defines the NavBar's height in minimized state.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :minimized="true" :minimizedHeight="40">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Defines the NavBar's Title in minimized state.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :minimized="true" :minimizedTitle="'custom element'">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Defines the NavBar's orientation. Possible values: "horizontal", "vertical".

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :orientation="'vertical'">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Defines the animation speed of the NavBar's Popup in minimized state.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :minimized="true" :popupAnimationDelay="400">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

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

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :rtl="true">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Sets or gets whether the items can be selected.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :selection="false">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Sets or gets the selected item. The property is taken into account when selection is true.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :selectedItem="1">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</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>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50" :theme="'material'">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

Sets or gets the NavBar's width.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    }
  }
</script>

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxNavBar.

<template>
  <JqxNavBar ref="myNavBar" @change="onChange($event)"
    :width="'90%'" :height="50">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    },
    methods: {
      onChange: function (event) {
        alert('do something...');
      }
    }
  }
</script>

When NavBar is minimized, closes the popup.

<template>
  <div>
    <JqxNavBar ref="myNavBar"
          :width="'90%'" :height="50" :minimized="true">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </JqxNavBar>
    <JqxButton class="button" @click="open">Open</JqxButton>
    <JqxButton class="button" @click="close">Close</JqxButton>
  </div>
</template>
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavBar,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myNavBar.open();
      },
      close: function () {
        this.$refs.myNavBar.close();
      }
    }
  }
</script>
<style>
  .button {
    display: inline-block;
    margin-top: 80px;
    margin-right: 20px;
  }
</style>

Destroys the jqxNavBar widget.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    },
    mounted: function () {
      this.$refs.myNavBar.destroy();
    }
  }
</script>

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    },
    mounted: function () {
      const value = this.$refs.myNavBar.getSelectedIndex();
    }
  }
</script>

When NavBar is minimized, opens the popup.

<template>
  <div>
    <JqxNavBar ref="myNavBar"
          :width="'90%'" :height="50" :minimized="true">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </JqxNavBar>
    <JqxButton class="button" @click="open">Open</JqxButton>
    <JqxButton class="button" @click="close">Close</JqxButton>
  </div>
</template>
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavBar,
      JqxButton
    },
    methods: {
      open: function () {
        this.$refs.myNavBar.open();
      },
      close: function () {
        this.$refs.myNavBar.close();
      }
    }
  }
</script>
<style>
  .button {
    display: inline-block;
    margin-top: 80px;
    margin-right: 20px;
  }
</style>

Selects the item with indicated index. Index is a number.

<template>
  <JqxNavBar ref="myNavBar"
    :width="'90%'" :height="50">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </JqxNavBar>
</template>
 
<script>
  import JqxNavBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavbar.vue';
 
  export default {
    components: {
      JqxNavBar
    },
    mounted: function () {
      this.$refs.myNavBar.selectAt(1);
    }
  }
</script>