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"


  • type - (string) the type of a control, set it to "navItem"
  • id - (string) the id of a control, auto-generated if not set
  • css - (string) adds style classes to a navItem
  • html - (string) optional, a string with HTML that should be inserted into the navItem
  • value - (string) a value of the navItem. You need to set either the html or value property to the navItem
  • tooltip - (string) a tooltip for the navItem
  • count - (number) a badge with a number
  • countColor - (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
  • items - (array) an array of nested controls. You can find the full list of all available controls here. If the type of a nested control is not specified, the menuItem type will be applied by default.
  • icon - (string) an icon of the navItem
  • size - (string) defines the size of a navItem: "small"|"medium"|"auto"

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

    type: "navItem",
    html: "<div class='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:;

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:

    tooltip:"Click me and find out why"  }

Related sample:  Toolbar. Tooltips

Back to top