Gets or sets the expanding animation duration.

Code example

Initialize a with the expandAnimationDuration property specified.

$('#jqxNavigationBar').jqxNavigationBar({ expandAnimationDuration: 400 });

                        

Gets or sets the collapsing animation duration.

Code example

Initialize a jqxNavigationBar with the collapseAnimationDuration property specified.

$('#jqxNavigationBar').jqxNavigationBar({collapseAnimationDuration: 400 });

                        

Gets or sets whether the navigation bar is disabled.

Code example

Initialize a jqxNavigationBar with the disabled property specified.

$('#jqxNavigationBar').jqxNavigationBar({ disabled:true }); 

Gets or sets the animation type. Possible values ['slide', 'fade', 'none'].

Code example

Initialize a jqxNavigationBar with the animationType property specified.

$('#jqxNavigationBar').jqxNavigationBar({animationType: "none" }); 

Gets or sets user interaction used for expanding or collapsing the content. Possible values ['click', 'dblclick', 'mouseenter', 'none'].

Code example

Initialize a jqxNavigationBar with the toggleMode property specified.

$('#jqxNavigationBar').jqxNavigationBar({ toggleMode: "none" }); 

Gets or sets navigation bar's expand mode. Possible values ['single', 'multiple', 'toggle', 'none'].

Code example

Initialize a jqxNavigationBar with the expandMode property specified.

$('#jqxNavigationBar').jqxNavigationBar({ expandMode:"none" }); 

Gets or sets navigation bar's size mode. Possible values ['fitAvailableHeight', 'maxItemHeight', 'auto'].

Code example

Initialize a jqxNavigationBar with the sizeMode property specified.

$('#jqxNavigationBar').jqxNavigationBar({ sizeMode: "auto }); 

Gets or sets header's arrow position. Possible values ['left', 'right'].

Code example

Initialize a jqxNavigationBar with the arrowPosition property specified.

$('#jqxNavigationBar').jqxNavigationBar({ arrowPosition: "right" }); 

Gets or sets whether header's arrow is going to be shown.

Code example

Initialize a jqxNavigationBar with the showArrow property specified.

$('#jqxNavigationBar').jqxNavigationBar({ showArrow: false }); 

Sets the expanded items when expandMode is set to 'multiple'.

Code example

Initialize a jqxNavigationBar with the expandedIndexes property specified.

$('#jqxNavigationBar').jqxNavigationBar({ expandedIndexes: [0, 1] }); 

Gets or sets the expanded index when expandMode is set to 'single'.

Code example

Initialize a NavigationBar with the expandedIndex property specified.

$('#jqxNavigationBar').jqxNavigationBar({ expandedIndex: -1 }); 

Gets or sets expander's height. Possible values - 'auto' and string like this 'Npx' where N is any Number.

Code example

Initialize a NavigationBar with the height property specified.

$('#jqxNavigationBar').jqxNavigationBar({ height:"auto" }); 

Gets or sets expander's width. Possible values - 'auto' and string like this 'Npx' where N is any Number.

Code example

Initialize a NavigationBar with the width property specified.

$('#jqxNavigationBar').jqxNavigationBar({ width: '200px',height: "auto" });

                        

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

Code example

Bind to the expandingItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').bind('expandingItem', function (event) { // Some code here.}); 

This event is triggered when a jqxNavigationBar item is expanded.

Code example

Bind to the expandedItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').bind('expandedItem', function (event) { // Some code here. }); 

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

Code example

Bind to the collapsingItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').bind('collapsingItem', function (event) { // Some code here. }); 

This event is triggered when a jqxNavigationBar item is collapsed.

Code example

Bind to the collapsedItem event by type: jqxNavigationBar.

$('#jqxNavigationBar').bind('collapsedItem', function (event) { // Some code here.}); 

Collapsing item with any index.

Code example

Invoke the collapseAt method.

$('#jqxNavigationBar').jqxNavigationBar('collapseAt', 3); 

Expanding item with any index.

Code example

Invoke the expandAt method.

$('#jqxNavigationBar').jqxNavigationBar('expandAt', 3); 

Setting content to item with any index.

Code example

Invoke the setContentAt method.

$('#jqxNavigationBar').jqxNavigationBar('setContentAt', 3, 'Content'); 

Setting header content to item with any index

Code example

Invoke the setHeaderContentAt method.

$('#jqxNavigationBar').jqxNavigationBar('setHeaderContentAt', 3, 'Header');

Getting header content of item with any index.

Code example

Invoke the getHeaderContentAt method.

var header = $('#jqxNavigationBar').jqxNavigationBar('getHeaderContentAt',3); 

Getting content of item with any index.

Code example

Invoke the getContentAt method.

var content = $('#jqxNavigationBar').jqxNavigationBar('getContentAt', 3);

                        

Disabling item with any index.

Code example

Invoke the disable method.

$('#jqxNavigationBar').jqxNavigationBar('disableAt', 3); 

Enabling item with any index.

Code example

Invoke the enableAt method.

$('#jqxNavigationBar').jqxNavigationBar('enableAt', 3); 

Forbidding expand/collapse for item with specific index.

Code example

Invoke the lockAt method.

$('#jqxNavigationBar').jqxNavigationBar('lockAt', 3); 

Allowing expand/collapse for item with specific index. This method is useful only when the item is already locked.

Code example

Invoke the unlockAt method.

$('#jqxNavigationBar').jqxNavigationBar('unlockAt', 3); 

Showing the arrow of expander with specific index.

Code example

Invoke the showArrowAt method.

$('#jqxNavigationBar').jqxNavigationBar('showArrowAt', 3); 

Hiding the arrow of expander with specific index.

Code example

Invoke the hideArrowAt method.

$('#jqxNavigationBar').jqxNavigationBar('hideArrowAt', 3); 

This method is disabling the navigation bar.

Code example

Invoke the disable method.

$('#jqxNavigationBar').jqxNavigationBar('disable'); 

This method is enabling the navigation bar.

Code example

Invoke the enable method.

$('#jqxNavigationBar').jqxNavigationBar('enable');