Skip to main content


MenuItem is a drop-down list of options, can contain its own sub-menu.

Adding MenuItem

A menuItem can be easily added to a sidebar with the help of the add() method of Tree Collection:{
type:"menuItem", value:"Sidebar menuItem", tooltip: "Press me", items:[
{ type:"menuItem", value:"Option 1" },
{ type:"menuItem", value:"Option 2" },
{ type:"separator"},
{ type:"menuItem", value:"Option Infinite" }


You can provide the following properties in the configuration object of a MenuItem control.

Adding an icon

A menuItem can have an icon which is set through the corresponding option icon:

type:"menuItem", value:"Some",
icon:"dxi dxi-menu-right"

Adding a badge with a number

You can add a number badge to the menuItem to display information like the number of new messages. The badge is set via the count property:

type:"menuItem", value:"Some",
icon:"dxi dxi-check",

Adding HTML content

You can add any custom HTML content to a menuItem with the help of the html property:

type: "menuItem",
html: "<img className='item-avatar' src='../avatars/Avatar_07.jpg'/>"

Showing/hiding a menuItem

To hide/show a menuItem, you should pass the ID of the menuItem to the hide() / show() Sidebar methods:;

Enabling/disabling a menuItem

Any menuItem in the sidebar can be enabled/disabled:


Setting tooltip

You can add a tooltip to a menuItem:

tooltip:"Click me and find out why"