MenuItem

The MenuItem control displays a drop-down list of options. It can contain its own submenu.

Add MenuItem

Use the add() method of TreeCollection to add a MenuItem control to a sidebar:

sidebar.data.add({
    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" }
    ]
});

Properties

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

Add an icon

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

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

Add a badge with a number

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

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

Add HTML content

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

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

Show and hide a MenuItem

The show() and hide() methods of Sidebar show and hide a MenuItem control by its ID:

sidebar.show(id);
sidebar.hide(id);

Enable and disable a MenuItem

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

sidebar.enable(id);
sidebar.disable(id);

Add a tooltip

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

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