Skip to main content

NavItem

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

Related sample: Toolbar. NavItem

Adding NavItem​

A navItem can be easily added to a toolbar with the help of the add() method of Tree Collection.

toolbar.data.add({
    type:"navItem", value:"My NavItem"
});

Properties​

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.show(id);
toolbar.hide(id);

Related sample: Toolbar. Hide / show items

Enabling/disabling a navItem​

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

toolbar.enable(id);
toolbar.disable(id);

Related sample: Toolbar. Enable / disable items

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. TwoState

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
// or
toolbar.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"
}
...
const state = toolbar.getState(); // -> { bold:true } or { bold:false }