ASP .NET Core jqxNavigationBar Tag Helper API

animationType	string	'slide'
Sets or gets the `animationType` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar animation-type="fade">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
arrowPosition	string	'right'
Sets or gets the `arrowPosition` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar arrow-position="left">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
collapseAnimationDuration	int	400
Sets or gets the `collapseAnimationDuration` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar collapse-animation-duration="3000">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
disabled	bool	false
Sets or gets the `disabled` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar disabled="true">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
expandAnimationDuration	int	400
Sets or gets the `expandAnimationDuration` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar expand-animation-duration="3000">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
expandMode	string	'singleFitHeight'
Sets or gets the `expandMode` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar expand-mode="single">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
expandedIndexes	List<string>	[]
Sets or gets the `expandedIndexes` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar expanded-indexes='[0, 1]'>` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
height	int	'auto'
Sets or gets the `height` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar height="200">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
initContent	string	null
Sets or gets the `initContent` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar init-content="initContent">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
rtl	bool	false
Sets or gets the `rtl` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar rtl="true">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
showArrow	bool	true
Sets or gets the `showArrow` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar show-arrow="false">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
theme	string	''
Sets or gets the `theme` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar theme="energyblue">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
toggleMode	string	click
Sets or gets the `toggleMode` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar toggle-mode="dblclick">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
width	int	'auto'
Sets or gets the `width` property. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar width="400">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar>
Events
collapsingItem	Event
Code examples Bind to the `collapsingItem` event of jqxNavigationBar. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar on-collapsing-item="eventHandler()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
collapsedItem	Event
Code examples Bind to the `collapsedItem` event of jqxNavigationBar. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar on-collapsed-item="eventHandler()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
expandingItem	Event
Code examples Bind to the `expandingItem` event of jqxNavigationBar. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar on-expanding-item="eventHandler()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
expandedItem	Event
Code examples Bind to the `expandedItem` event of jqxNavigationBar. `<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar on-expanded-item="eventHandler()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function eventHandler(event) { } </script> }
Methods
add	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["add"](1,'Header','Content'); } </script> }
collapseAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["collapseAt"](1); } </script> }
disableAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["disableAt"](1); } </script> }
disable	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["disable"](); } </script> }
destroy	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["destroy"](); } </script> }
expandAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["expandAt"](1); } </script> }
enableAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["enableAt"](1); } </script> }
enable	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["enable"](); } </script> }
focus	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["focus"](); } </script> }
getHeaderContentAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["getHeaderContentAt"](1); } </script> }
getContentAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["getContentAt"](1); } </script> }
hideArrowAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["hideArrowAt"](1); } </script> }
invalidate	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["invalidate"](); } </script> }
insert	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["insert"](1,'Header','Content'); } </script> }
refresh	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["refresh"](); } </script> }
render	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["render"](); } </script> }
remove	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["remove"](1); } </script> }
setContentAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["setContentAt"](1,'Content'); } </script> }
setHeaderContentAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["setHeaderContentAt"](1,'Header'); } </script> }
showArrowAt	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["showArrowAt"](1); } </script> }
update	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["update"](1,'Title','Content'); } </script> }
val	Method
`<script src="~/jqwidgets/jqxnavigationbar.js"></script>` `<jqx-navigation-bar instance="getInstance()">` `<jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel-header>Header 1</jqx-navigation-bar-panel-header>` `<jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 1</label></jqx-navigation-bar-panel-body>` `</jqx-navigation-bar-panel>` `<jqx-navigation-bar-panel>` <jqx-navigation-bar-panel-header>Header 2</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 2</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> <jqx-navigation-bar-panel> <jqx-navigation-bar-panel-header>Header 3</jqx-navigation-bar-panel-header> <jqx-navigation-bar-panel-body><label style="padding: 15px;">Body 3</label></jqx-navigation-bar-panel-body> </jqx-navigation-bar-panel> </jqx-navigation-bar> @section scripts { <script type="text/javascript"> function getInstance(instance) { instance["val"](1); } </script> }

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods