Skip to main content


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 sidebar with the help of the add() method of Tree Collection:{    type:"navItem", value:"My NavItem"});

Related sample: Sidebar. Navigation Items


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: "<img className='item-avatar' src='../avatars/Avatar_07.jpg'/>"}

Related sample: Sidebar. Item HTML Content

Showing/hiding a navItem#

To hide/show a navItem, you should pass the ID of the navItem to the hide() / show() Sidebar methods:;sidebar.hide(id);

Enabling/disabling a navItem#

Any navItem in the sidebar can be enabled/disabled:


Setting tooltip#

You can add a tooltip to a navItem:

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