## Properties

Name | Type | Default
--- | --- | ---
columns | Array | []
Defines the layout of the widget's elements. Each Array item should be a Percentage Value and the total should be "100%".

#### Code examples

Set the `columns` property.

    $("#jqxNavBar").jqxNavBar({ columns: ['30%', '70%'});

Get the `columns` property.

    var columns = $('#jqxNavBar').jqxNavBar('columns');

Try it: columns is set to ['30%', '40%', '30%']
disabled | Boolean | false
Enables/disables the navbar.

#### Code examples

Set the `disabled` property.

    $("#jqxNavBar").jqxNavBar({ disabled: false });

Get the `disabled` property.

    var disabled = $('#jqxNavBar').jqxNavBar('disabled');

Try it: disabled is set to true
height | Number/String | null
Sets or gets the NavBar's height.

#### Code examples

Set the `height` property.

    $("#jqxNavBar").jqxNavBar({ height: 30 });

Get the `height` property.

    var height = $('#jqxNavBar').jqxNavBar('height');

Try it: height is set to 40
minimized | Boolean | false
Defines whether the NavBar is minimized.

#### Code examples

Set the `minimized` property.

    $("#jqxNavBar").jqxNavBar({ minimized: true);

Get the `minimized` property.

    var minimized = $('#jqxNavBar').jqxNavBar('minimized');

Try it: minimized is set to true
minimizeButtonPosition | String | 'left'
Defines the position of the Toggle Button in the minimized state.

#### Code examples

Set the `minimizeButtonPosition` property.

    $("#jqxNavBar").jqxNavBar({ minimizeButtonPosition: "right");

Get the `minimizeButtonPosition` property.

    var minimizeButtonPosition = $('#jqxNavBar').jqxNavBar('minimizeButtonPosition');

Try it: minimizeButtonPosition is set to "right"
minimizedHeight | Number | 30
Defines the NavBar's height in minimized state.

#### Code examples

Set the `minimizedHeight` property.

    $("#jqxNavBar").jqxNavBar({ minimizedHeight: 40);

Get the `minimizedHeight` property.

    var minimizedHeight = $('#jqxNavBar').jqxNavBar('minimizedHeight');

Try it: minimizedHeight is set to 40
minimizedTitle | String/HTML Element | ""
Defines the NavBar's Title in minimized state.

#### Code examples

Set the `minimizedTitle` property.

    $("#jqxNavBar").jqxNavBar({ minimizedTitle: 'Title');

Get the `minimizedTitle` property.

    var minimizedTitle = $('#jqxNavBar').jqxNavBar('minimizedTitle');

Try it: minimizedTitle is set to custom element.
orientation | String | "horizontal"
Defines the NavBar's orientation. Possible values: "horizontal", "vertical".

#### Code examples

Set the `orientation` property.

    $("#jqxNavBar").jqxNavBar({ orientation: 'vertical');

Get the `orientation` property.

    var orientation = $('#jqxNavBar').jqxNavBar('orientation');

Try it: orientation is set to "vertical".
popupAnimationDelay | Number | 250
Defines the animation speed of the NavBar's Popup in minimized state.

#### Code examples

Set the `popupAnimationDelay` property.

    $("#jqxNavBar").jqxNavBar({ popupAnimationDelay: 400);

Get the `minimized` property.

    var popupAnimationDelay = $('#jqxNavBar').jqxNavBar('popupAnimationDelay');

Try it: popupAnimationDelay is set to 400
rtl | Boolean | false
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

#### Code examples

Set the `rtl` property.

    $("#jqxNavBar").jqxNavBar({ rtl: false});

Get the `rtl` property.

    var rtl = $('#jqxNavBar').jqxNavBar('rtl');

Try it: rtl is set to true
selection | Boolean | true
Sets or gets whether the items can be selected.

#### Code examples

Set the `selection` property.

    $("#jqxNavBar").jqxNavBar({ selection: false });

Get the `selection` property.

    var selection = $('#jqxNavBar').jqxNavBar('selection');

Try it: selection is set to false
selectedItem | Number | 0
Sets or gets the selected item. The property is taken into account when `selection` is true.

#### Code examples

Set the `selectedItem` property.

    $("#jqxNavBar").jqxNavBar({ selectedItem: 0 });

Get the `selectedItem` property.

    var selectedItem = $('#jqxNavBar').jqxNavBar('selectedItem');

Try it: selectedItem is set to 1
theme | String | ''
Sets the widget's theme. jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

- Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'fresh' theme.

      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css"type="text/css"/>
      <link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.fresh.css" type="text/css" />

- Set the widget's theme property to 'fresh' when you initialize it.

      $('#jqxNavBar').jqxNavBar({ theme: 'fresh' });

Try it: theme is set to 'fresh'
width | Number/String | '100%'
Sets or gets the NavBar's width.

#### Code examples

Set the `width` property.

    $("#jqxNavBar").jqxNavBar({ width: '90%' });

Get the `width` property.

    var width = $('#jqxNavBar').jqxNavBar('width');

Try it: width is set to '90%'

## Events

change | Event |
This event is triggered when the user selects an item.

#### Code examples

Bind to the `change` event by type: jqxNavBar.

    $('#jqxNavBar').on('change', function () { // Some code here. });

Try it: Bind to the change event by type: jqxNavBar.

## Methods

close | Method |
When NavBar is minimized, closes the popup.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `close` method.

    $("#jqxNavBar").jqxNavBar('close');

Try it: closes the popup of minimized NavBar.
destroy | Method |
Destroys the jqxNavBar widget.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `destroy` method.

    $('#jqxNavBar').jqxNavBar('destroy');

Try it: destroys the jqxNavBar.
getSelectedIndex | Method |
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.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
Number

#### Code examples

Invoke the `getSelectedIndex` method.

// @param Number

    var index = $("#jqxNavBar").jqxNavBar('getSelectedIndex');

Try it: returns the selected item's index and displays it
open | Method |
When NavBar is minimized, opens the popup.

Parameter | Type | Description
--- | --- | ---
None |  |

Return Value
None

#### Code examples

Invoke the `open` method.

    $("#jqxNavBar").jqxNavBar('open');

Try it: opens the popup of minimized NavBar.
selectAt | Method |
Selects the item with indicated index. Index is a number.

Parameter | Type | Description
--- | --- | ---
index | Number |

Return Value
None

#### Code examples

Invoke the `selectAt` method.

// @param index - Number

    $('#jqxNavBar').jqxNavBar('selectAt', 1);

Try it: selects item in the jqxNavBar