Initialization

info

Download the DHTMLX Menu package as a part of the DHTMLX Suite library

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

• Include source files
• Create a container
• Initialize Menu with the object constructor
• Load data into Menu

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Menu</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 DHTMLX Menu
            const menu = new dhx.Menu("menu_container");
        </script>
    </body>
</html>

Include source files

Unpack the downloaded package into a folder of your project.

After that, create an HTML file and place the full paths to the dhtmlxSuite JS and CSS files 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 Menu and give it an id, for example "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

const 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

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

Example