MenuItem is a drop-down list of options, can contain its own sub-menu.
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" }
]
});
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 |
A menuItem can have an icon which is set through the corresponding option icon:
{
type:"menuItem", value:"Some",
icon:"dxi dxi-menu-right"
}
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
}
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'/>"
}
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);
Any menuItem in the sidebar can be enabled/disabled:
sidebar.enable(id);
sidebar.disable(id);
You can add a tooltip to a menuItem:
{
type:"menuItem",
value:"Click",
tooltip:"Click me and find out why" }
Back to top