Skip to main content


To add dhtmlxMenu into an application, you need to take the following simple steps:

<!DOCTYPE html><html>    <head>        <title>How to Start with dhtmlxMenu</title>                 <script type="text/javascript" src="../../codebase/suite.js"></script>        <link rel="stylesheet" href="../../codebase/suite.css">    </head>    <body>        <div id="menu_container"></div>        <script>            // creating dhtmlxMenu            var menu = new dhx.Menu("menu_container");        </script>    </body></html>

Related sample: Menu. Basic Menu Initialization

Include source files#

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script><link rel="stylesheet" href="../../codebase/suite.css">

Create a container#

Add a container for the Menu and give it an id, e.g. "menu_container":

<div id="menu_container"></div>

Initialize Menu#

Initialize Menu with the dhx.Menu object constructor. The constructor takes two parameters:

  • the HTML object on the page that serves as the Menu container
  • an object with configuration properties. If this argument is not passed to the constructor, the settings will be default
var menu = new dhx.Menu("menu_container");

Configuration properties#

You can find the full list of Menu configuration properties in the Menu API overview article.

Load data into Menu#

There are two handy ways of loading data, i.e. a set of controls into Menu:

  • from an external file with the help of the load() method of tree collection:
var menu = new dhx.Menu("menu_container");"../common/dataset.json");
  • from a local source using the parse() method of tree collection:
var data = [    {        value: "File",         items: [            {                value: "New File",            },            {                value: "New window",            },            {                value: "Open File",            },            {                value: "Save File",            }        ]    },    {        value: "Edit",                          items: [            {                value: "Undo"            },            {                value:  "Redo"            },            {                value: "Cut"            },            {                value: "Copy"            }         ]    }];
var menu = new dhx.Menu("menu_container");;

Related sample: Menu. Basic Menu Initialization

Detailed information on loading data into Menu is given in the article Data Loading.