Skip to main content

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:

<!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 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
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​