NavItem

The NavItem control is the default control of navigation-related components. It can contain other controls as nested items.

Add NavItem

Use the add() method of TreeCollection to add a NavItem control to a ribbon:

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

Related sample: Ribbon. Nav items

Check the list of properties that you can set in the configuration object of a NavItem control.

Use the icon property to add an icon to a NavItem control:

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

Use the count property to add a badge with a number to a NavItem control, for example, to count new messages:

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

Use the html property to add custom HTML content to a NavItem control:

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

Related sample: Ribbon. Item HTML content

The show() and hide() methods of Ribbon show and hide a NavItem control by its ID:

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

The enable() and disable() methods enable and disable a NavItem control by its ID:

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

Use the tooltip property to add a tooltip to a NavItem control:

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