Skip to main content


This is a default control for navigation-related components, can contain any other controls as nested items.

Related sample: Toolbar. Nav Item

Adding NavItem#

A navItem can be easily added to a toolbar with the help of the add() method of Tree Collection.{    type:"navItem", value:"My NavItem"});


You can provide the following properties in the configuration object of a NavItem control.

Adding an icon#

A navItem can have an icon which is set through the corresponding option icon:

{    type:"navItem", value:"Some",    icon:"dxi dxi-check"}

Adding a badge with a number#

You can add a number badge to the navItem to display information like the number of new messages. The badge is set via the count property:

{    type:"navItem", value:"Some",    icon:"dxi dxi-check",    count:10}

Adding HTML content#

You can add any custom HTML content to a navItem with the help of the html property:

{    type: "navItem",    html: "<div className='user-button'><img src='../avatars/Avatar.jpg'/></div>",}

Related sample: Toolbar. Item HTML Content

Showing/hiding a navItem#

To hide/show a navItem, you should pass the ID of the navItem to the hide() / show() Toolbar methods:;toolbar.hide(id);

Related sample: Toolbar. Hide/Show

Enabling/disabling a navItem#

You can also enable and disable any navItem with the enable()/disable() methods of Toolbar:


Related sample: Toolbar. Enable/Disable

Setting tooltip#

You can add a tooltip to a navItem:

{    type:"navItem",     value:"Click",     tooltip:"Click me and find out why"  /*!*/}

Related sample: Toolbar. Tooltips

Two state NavItems#

You can create navItems with two states: active (pressed) and inactive (unpressed). The activity of a two state navItem is controlled via the active attribute of the navItem object:

{    type: "navItem",    icon: "dxi dxi-format-bold",    tooltip: "bold text",    twoState: true, active: false /*!*/}

Related sample: Toolbar. Two State

Changing state of a two state navItem on the fly#

The state of a two state item can be changed programmatically with the setState() method of Toolbar as in:

{    type: "navItem", icon: "dxi dxi-format-bold",    tooltip: "bold text", twoState: true,     id:"bold"}...toolbar.setState({"bold":true});    // active:true  /*!*/// ortoolbar.setState({"bold":false});   // active:false /*!*/

setState() accepts one parameter: a key-value pair with the ID of the item and the new value.

Accessing current state of a two state navItem#

The current state of a two state item can be checked with the getState() method:

{    type: "navItem", icon: "dxi dxi-format-bold",    tooltip: "bold text", twoState: true,     id:"bold"}...var state = toolbar.getState(); // -> { bold:true } or { bold:false } /*!*/