Check documentation for the latest version of dhtmlxSuite Object Constructor DHTMLX Docs

Object Constructor

var myMenu = new dhtmlXMenuObject(parent, skin);


  • parent - id of HTML element which will be used as parent (or object itself)
  • skin - name of skin, optional (string)

    The full list of initialization options is given below.

<div id='my_menu_here' style="width: 500px;"> </div>
// common init code
var myMenu = new dhtmlXMenuObject("my_menu_here");

dhtmlxLayout, dhtmlxWindow, dhtmlxAccordion and dhtmlxTabbar can create a menu inside their cells by using the following syntax:

// attach to Layout
// attach to Window
// attach to Accordion
// attach to Tabbar

Menu can also be initialized by object notation

var myMenu = new dhtmlXMenuObject({
        alert("Menu item was clicked"); 

Specifying Initialization Options

  • parent - (string or object), id of container, where tree will be initialized, mandatory
  • image_path - (string), path to image folder, which will be used for icons in tree
  • skin - {string} changes menu skin (setSkin())
  • iconset - {string} sets the Font Awesome icons for menu
  • align - {string} sets top level menu align (setAlign())
  • auto_hide - {boolean} sets to false to prevent hiding a contextual menu by a click (setAutoHideMode())
  • auto_show - {boolean} sets to false to prevent showing a contextual menu by a click (setAutoShowMode())
  • caption - {string} sets top level additional text (in case of usual menubar)(setTopText())
  • context - {boolean} renders menu as contextual (renderAsContextMenu())
  • dynamic - {string} enables dynamic loading of sublevels (enableDynamicLoading())
  • icon_path - {string} defines an url where necessary user embedded icons are located (setIconsPath())
  • open_mode - {string} sets open mode for the menu (setOpenMode())
  • xml - {string}, url of data xml file

Specifying Menu Items

menu items can be defined through items collection

myMenu = new dhtmlXMenuObject({
        {id:"t1", text:"Top 1", items:[
            {id:"ch1", text:"child 1"},
            {id:"ch2", text:"child 2"}

Each item can have next attributes:

  • id - {string} id of menu item
  • text - {string} caption of menu item
  • img - {sting} url of image related to menu item
  • disabled - {boolean} disabled state
  • img_disabled - {sting} url which will be used for item in disabled state
Back to top