MenuItem

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:

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" }
    ]
});

Attributes

type	(string) the type of a control, set it to "menuItem". If not specified - the "navItem" type is applied by default.
id	(string) the id of a control, auto-generated if not set
parent	(string) the parent of the item
value	(string) a value for the menu item. You need to set either the value or html property to the item
html	(string) optional, a string with HTML that should be inserted into the menu item
css	(string\|string[]) adds style classes
icon	(string) the name of an icon from the used icon font
items	(array) an array of children controls (note that all the children should have the type menuItem)
hotkey	(string) the name of a keyboard shortcut for a menu item
tooltip	(string) a tooltip for the menuItem
count	(number\|string) a badge with a number
countColor	(string) the color of a badge with number: "danger" \| "secondary" \| "primary" \| "success"
hidden	(boolean) defines whether a control is hidden
disabled	(boolean) defines whether an item is disabled

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",
    count:10
}

Adding HTML content

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

{
    type: "menuItem",
    html: "<img class='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:

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

Enabling/disabling a navItem

Any menuItem in the sidebar can be enabled/disabled:

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

Setting tooltip

You can add a tooltip to a menuItem:

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