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:{
    type:"navItem", value:"My NavItem"

Related sample:  Ribbon. Nav Items


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",

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:;

Enabling/disabling a navItem

Any navItem in the ribbon can be enabled/disabled:


Setting tooltip

You can add a tooltip to a navItem:

    tooltip:"Click me and find out why"  }
Back to top