List of Menu Controls

In this article you'll find the controls you can use in dhtmlxMenu. Their descriptions contain lists of attributes and examples of adding the controls into Menu on the fly.

To operate Menu controls, you can use Menu API and Tree Collection API. Check the related article.

MenuItem

MenuItem is a drop-down list of options.

Menu Item

Adding menuItem

You can add a MenuItem control into the menu with the help of the add() method of Tree Collection:

menu.data.add({
    type:"menuItem", value:"Menu", items:[
        { type:"menuItem", value:"Option 1" },
        { type:"menuItem", value:"Option 2" },
        { type:"separator"},
        { type:"menuItem", value:"Option Infinite" }
    ]
});

Related sample:  Menu item - DHTMLX Menu

Attributes

You can provide the following attributes in the configuration object of a MenuItem control:

  • type - (string) the type of a control, set it to "menuItem"
  • id - (string) the id of a control, auto-generated if not set
  • 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)
  • html - (string) optional, a string with HTML that should be inserted into the menu item
  • value - (string) a value for the menu item. You need to set either the html or value property to the item
  • hotkey - (string) the name of a keyboard shortcut for a menu item

NavItem

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 menu with the help of the add() method of Tree Collection:

menu.data.add({
    type:"navItem", value:"My NavItem"
});

Attributes

  • type - (string) the type of a control, set it to "navItem"
  • id - (string) the id of a control, auto-generated if not set
  • css - (string) adds style classes to a navItem
  • html - (string) optional, a string with HTML that should be inserted into the navItem
  • value - (string) a value of the navItem. You need to set either the html or value property to the navItem
  • tooltip - (string) a tooltip for the navItem
  • count - (number) a badge with a number
  • countColor - (string) the color of a badge with number: "danger" | "secondary" | "primary" | "success"
  • items - (array) an array of nested controls
  • icon - (string) an icon of the navItem
  • size - (string) defines the size of a navItem: "small"|"medium"|"auto"

Adding an icon

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

{
    type:"navItem", value:"Some",
    icon:"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-check",
    count:10
}

Adding HTML content

You can add a custom image into the navItem with the help of the html property:

{
    type: "navItem",
    id: "spline",
    html: "<img src='..img/chart-spline.svg'/>"
}

Related sample:  Item HTML Content - DHTMLX Menu

Showing/hiding a navItem

To hide/show a navItem, you should pass the ID of the navItem to the hide() / show() Menu methods:

menu.show(id);
menu.hide(id);

Enabling/disabling a navItem

Any navItem in the menu can be enabled/disabled:

menu.enable(id);
menu.disable(id);

Setting tooltip

You can add a tooltip to a navItem:

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

Custom HTML

This is an item that contains any custom HTML content (for example, an image, icon or other element).

Adding Custom HTML

Any custom HTML content can be easily added to a menu with the help of the add() method of Tree Collection:

menu.data.add({
    id: "input",
    parent: "edit",
    type: "customHTML",
    html: "<img src='../logo.svg' alt=''/>",
    css: "custom-image"
});

Related sample:  Custom HTML - DHTMLX Menu

Attributes

  • type - (string) required, the item type, set it to "customHTML"
  • id - (string) the id of an item, auto-generated if not set
  • html - (string) a string with HTML that should be inserted into the item
  • css - (string) adds style classes
  • parent - (string) the parent of the item

Separator

This is a horizontal (between menu options) or vertical (between menu items) line separating items/groups of items from each other.

Adding Separator

A new Separator can be created with the help of the add() method of Tree Collection:

menu.data.add({
    type:"separator"
});

Related sample:  Separator - DHTMLX Menu

Attributes

Separator can have two attributes:

  • type - (string) the item type, set it to "separator"
  • id - (string) the ID of a control, automatically generated if you do not set it

Spacer

This item takes space on the toolbar and is used for aligning controls.

DHX Toolbar spacer

Adding Spacer

A new Spacer can be created with the help of the add() method of Tree Collection:

toolbar.data.add({
    type:"spacer"
});

Related sample:  Spacer - DHTMLX Menu

Attributes

Spacer can have two attributes:

  • type - (string) the type of a control, set it to "spacer"
  • id - (string) the ID of a control, automatically generated if you do not set it
Back to top