Sets or gets the animation type.

'slide'

'fade'

'none'

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :animationType="'fade'">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets header's arrow position.

'left'

'right'

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :arrowPosition="'left'">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets the collapsing animation duration.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :collapseAnimationDuration="3000">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets whether the navigation bar is disabled.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :disabled="true">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets the expanding animation duration.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :expandAnimationDuration="3000">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets navigation bar's expand mode. Possible values ['single', 'singleFitHeight' 'multiple', 'toggle', 'none'].

'single' - only one item can be expanded. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown.

'singleFitHeight' - only one item can be expanded. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown inside the content of the expanded item

'multiple' - multiple items can be expanded. If the expanded items' height is greater than the value of the height property, a vertical scrollbar is shown.

'toggle' - only one item can be expanded. The expanded item can also be collapsed.If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown

'none' - no items can be expanded/collapsed

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :expandMode="'single'">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets the expanded item(s). If the property expandMode is set to either 'single', 'singleFitHeight', 'toggle' or 'none', only the item corresponding to the first value in the array is expanded. If the property expandMode is set to either 'single' or 'singleFitHeight' and the expandedIndexes array is empty, the first item is expanded automatically.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :expandMode="'multiple'" :expandedIndexes=" [0, 1] ">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets the navigationbar's height. Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Callback function called when an item's content needs to be initialized. Useful for initializing other widgets within the content of any of the items of jqxNavigationBar. The index argument shows which item is initialized.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :initContent="initContent">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      initContent: function () {
        jqwidgets.createInstance('#button', 'jqxButton', { width: 50, height: 50 });
      }
    }
  }
</script>

Determines whether the right-to-left support is enabled.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :rtl="true">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets whether header's arrow is going to be shown.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :showArrow="false">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</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>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :theme="'material'">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets user interaction used for expanding or collapsing the content. Possible values ['click', 'dblclick', 'none'].

'click'

'dblclick'

'none'

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200" :toggleMode="'dblclick'">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

Sets or gets the navigationbar's width. Possible values - 'auto' or string like this 'Npx' where N is any number or a numeric value in pixels.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    }
  }
</script>

This event is triggered when a jqxNavigationBar item is going to be collapsed.

Code examples

Bind to the collapsingItem event of jqxNavigationBar.

<template>
  <JqxNavigationBar ref="myNavigationBar" @collapsingItem="onCollapsingItem($event)"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      onCollapsingItem: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a jqxNavigationBar item is collapsed.

Code examples

Bind to the collapsedItem event of jqxNavigationBar.

<template>
  <JqxNavigationBar ref="myNavigationBar" @collapsedItem="onCollapsedItem($event)"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      onCollapsedItem: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a jqxNavigationBar item is going to be expanded.

Code examples

Bind to the expandingItem event of jqxNavigationBar.

<template>
  <JqxNavigationBar ref="myNavigationBar" @expandingItem="onExpandingItem($event)"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      onExpandingItem: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a jqxNavigationBar item is expanded.

Code examples

Bind to the expandedItem event of jqxNavigationBar.

<template>
  <JqxNavigationBar ref="myNavigationBar" @expandedItem="onExpandedItem($event)"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      onExpandedItem: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This method inserts an item at the bottom of the navigationbar. It has two parameters - header (the header of the new item) and content (the content of the new item).

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.add('Header','Content');
    }
  }
</script>

Collapsing item with any index.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="collapse">Collapse First</JqxButton>
    <JqxButton @click="expand">Expand First</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      collapse: function () {
        this.$refs.myNavigationBar.collapseAt(0);
      },
      expand: function () {
        this.$refs.myNavigationBar.expandAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Disabling item with any index.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="disable">Disable First</JqxButton>
    <JqxButton @click="enable">Enable First</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      disable: function () {
        this.$refs.myNavigationBar.disableAt(0);
      },
      enable: function () {
        this.$refs.myNavigationBar.enableAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

This method is disabling the navigation bar.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="disable">Disable</JqxButton>
    <JqxButton @click="enable">Enable</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      disable: function () {
        this.$refs.myNavigationBar.disable();
      },
      enable: function () {
        this.$refs.myNavigationBar.enable();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

This method destroys the navigationbar.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.destroy();
    }
  }
</script>

Expanding item with any index.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="collapse">Collapse First</JqxButton>
    <JqxButton @click="expand">Expand First</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      collapse: function () {
        this.$refs.myNavigationBar.collapseAt(0);
      },
      expand: function () {
        this.$refs.myNavigationBar.expandAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

Enabling item with any index.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="disable">Disable First</JqxButton>
    <JqxButton @click="enable">Enable First</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      disable: function () {
        this.$refs.myNavigationBar.disableAt(0);
      },
      enable: function () {
        this.$refs.myNavigationBar.enableAt(0);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

This method is enabling the navigation bar.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="disable">Disable</JqxButton>
    <JqxButton @click="enable">Enable</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      disable: function () {
        this.$refs.myNavigationBar.disable();
      },
      enable: function () {
        this.$refs.myNavigationBar.enable();
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

This method focuses on the navigationbar. When the widget is focused, keyboard navigation can be used. Here is a list of the keys, supported by jqxNavigationBar and their function:

• Enter/Spacebar - if the focus is on an item header, collapses or expands the item.
• Left/Up arrow - focuses on the previous item header or on the last one if the currently focused is the first one.
• Right/Down arrow - focuses on the next item header or on the first one if the currently focused is the last one.
• End - focuses on the last item header.
• Home - focuses on the first item header.
• Tab - focuses on the first header or the next element in the DOM.
• Ctrl+Up arrow - if the focus is on an item content, focuses on its respective header.
• Ctrl+Down arrow - if the focus is on an item header, focuses on its respective content.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.focus();
    }
  }
</script>

Getting header content of item with any index. Returns a string value.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      const value = this.$refs.myNavigationBar.getHeaderContentAt(1);
    }
  }
</script>

Getting content of item with any index. Returns a string value.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      const value = this.$refs.myNavigationBar.getContentAt(1);
    }
  }
</script>

Hiding the arrow of an item with specific index.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="hideArrow">Hide Arrow</JqxButton>
    <JqxButton @click="showArrow">Show Arrow</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      hideArrow: function () {
        this.$refs.myNavigationBar.hideArrowAt(1);
      },
      showArrow: function () {
        this.$refs.myNavigationBar.showArrowAt(1);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

This method refreshes the navigationbar.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.invalidate();
    }
  }
</script>

This method inserts an item at a specific index. It has three parameters - index, header (the header of the new item) and content (the content of the new item).

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.insert(1,'Header','Content');
    }
  }
</script>

This method refreshes the navigationbar.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.refresh();
    }
  }
</script>

This method renders the navigationbar.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.render();
    }
  }
</script>

This method removes an item at a specific index. The parameter (index) is optional and if it is not set, the method removes the last item.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.remove(1);
    }
  }
</script>

Setting content to item with any index.

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.setContentAt(1,'Content');
    }
  }
</script>

Setting header content to item with any index

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.setHeaderContentAt(1,'Header');
    }
  }
</script>

Showing the arrow of an item with specific index.

<template>
  <div>
    <JqxNavigationBar ref="myNavigationBar"
             :width="400" :height="200">
      <div>Header 1</div>
      <div>Content 1 <input type='button' id='button' value='Button' /></div>
      <div>Header 2</div>
      <div>Content 2</div>
    </JqxNavigationBar>
    <JqxButton @click="hideArrow">Hide Arrow</JqxButton>
    <JqxButton @click="showArrow">Show Arrow</JqxButton>
  </div>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    methods: {
      hideArrow: function () {
        this.$refs.myNavigationBar.hideArrowAt(1);
      },
      showArrow: function () {
        this.$refs.myNavigationBar.showArrowAt(1);
      }
    }
  }
</script>
<style>
  .jqx-button {
    display: inline-block;
    margin-top: 15px;
    margin-right: 20px;
  }
</style>

This method updates an item at a specific index. It has three parameters - index, header (the new header of the item) and content (the new content of the item).

<template>
  <JqxNavigationBar ref="myNavigationBar"
    :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
 
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
 
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.update(1,'Title','Content');
    }
  }
</script>

Sets or gets the expanded item.

<template>
  <JqxNavigationBar ref="myNavigationBar"
           :width="400" :height="200">
    <div>Header 1</div>
    <div>Content 1 <input type='button' id='button' value='Button' /></div>
    <div>Header 2</div>
    <div>Content 2</div>
  </JqxNavigationBar>
</template>
<script>
  import JqxNavigationBar from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxnavigationbar.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxNavigationBar,
      JqxButton
    },
    mounted: function () {
      this.$refs.myNavigationBar.val(1);
    }
  }
</script>