Skip to main content

NavItem

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

Adding NavItem​

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

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

Related sample: Ribbon. Nav items

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 a custom HTML content to a navItem with the help of the html property:

{
    type: "navItem",
    html: "<div id='preloader'><div id='loader'></div></div >",
}

Related sample: Ribbon. Item HTML content

Showing/hiding a navItem​

To hide/show a navItem, you should pass the ID of the navItem to the hide() / show() Ribbon methods:

ribbon.show(id);
ribbon.hide(id);

Enabling/disabling a navItem​

Any navItem in the ribbon can be enabled/disabled:

ribbon.enable(id);
ribbon.disable(id);

Setting tooltip​

You can add a tooltip to a navItem:

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