## Properties

Name | Type | Default
--- | --- | ---
expandAnimationDuration | Number | 400
Gets or sets the expanding animation duration. #### Code example Initialize a with the `expandAnimationDuration` property specified.
    $('#jqxNavigationBar').jqxNavigationBar({ expandAnimationDuration: 400 });
collapseAnimationDuration | Number | 400
Gets or sets the collapsing animation duration. #### Code example Initialize a jqxNavigationBar with the `collapseAnimationDuration` property specified.
    $('#jqxNavigationBar').jqxNavigationBar({collapseAnimationDuration: 400 });
disabled | Boolean | false
Gets or sets whether the navigation bar is disabled. #### Code example Initialize a jqxNavigationBar with the `disabled` property specified.
    $('#jqxNavigationBar').jqxNavigationBar({ disabled:true });
animationType | String | slide
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" });
toggleMode | String | click
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" });
expandMode | String | single
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" });
sizeMode | String | auto
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 });
arrowPosition | String | left
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" });
showArrow | Boolean | true
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 });
expandedIndexes | Array | left
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] });
expandedIndex | Number | -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 });
height | Number/String | auto
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" });
width | Number/String | 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" });
## Events
expandingItem | Event |
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.});
expandedItem | Event |
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. });
collapsingItem | Event |
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. });
collapsedItem | Event |
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.});
## Methods
collapseAt | Method |
Collapsing item with any index. #### Code example Invoke the collapseAt method.
    $('#jqxNavigationBar').jqxNavigationBar('collapseAt', 3);
expandAt | Method |
Expanding item with any index. #### Code example Invoke the expandAt method.
    $('#jqxNavigationBar').jqxNavigationBar('expandAt', 3);
setContentAt | Method |
Setting content to item with any index. #### Code example Invoke the setContentAt method.
    $('#jqxNavigationBar').jqxNavigationBar('setContentAt', 3, 'Content');
setHeaderContentAt | Method |
Setting header content to item with any index #### Code example Invoke the setHeaderContentAt method.
    $('#jqxNavigationBar').jqxNavigationBar('setHeaderContentAt', 3, 'Header');
getHeaderContentAt | Method |
Getting header content of item with any index. #### Code example Invoke the getHeaderContentAt method.
    var header = $('#jqxNavigationBar').jqxNavigationBar('getHeaderContentAt',3);
getContentAt | Method |
Getting content of item with any index. #### Code example Invoke the getContentAt method.
    var content = $('#jqxNavigationBar').jqxNavigationBar('getContentAt', 3);
disableAt | Method |
Disabling item with any index. #### Code example Invoke the disable method.
    $('#jqxNavigationBar').jqxNavigationBar('disableAt', 3);
enableAt | Method |
Enabling item with any index. #### Code example Invoke the enableAt method.
    $('#jqxNavigationBar').jqxNavigationBar('enableAt', 3);
lockAt | Method |
Forbidding expand/collapse for item with specific index. #### Code example Invoke the lockAt method.
    $('#jqxNavigationBar').jqxNavigationBar('lockAt', 3);
unlockAt | Method |
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);
showArrowAt | Method |
Showing the arrow of expander with specific index. #### Code example Invoke the showArrowAt method.
    $('#jqxNavigationBar').jqxNavigationBar('showArrowAt', 3);
hideArrowAt | Method |
Hiding the arrow of expander with specific index. #### Code example Invoke the hideArrowAt method.
    $('#jqxNavigationBar').jqxNavigationBar('hideArrowAt', 3);
disable | Method |
This method is disabling the navigation bar. #### Code example Invoke the disable method.
    $('#jqxNavigationBar').jqxNavigationBar('disable');
enable | Method |
This method is enabling the navigation bar. #### Code example Invoke the enable method.
    $('#jqxNavigationBar').jqxNavigationBar('enable');