Skip to main content



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

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

<!DOCTYPE html>
<title>How to Start with DHTMLX Sidebar</title>
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
<div id="sidebar_container"></div>
// creating DHTMLX Sidebar
const sidebar = new dhx.Sidebar("sidebar_container");

Related sample: Sidebar. Initialization with

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 Sidebar and give it an id, e.g. "sidebar_container":

<div id="sidebar_container"></div>

Initialize Sidebar

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

  • the HTML object on the page that serves as the sidebar container
  • an object with configuration properties. If this argument is not passed to the constructor, the settings will be default
const sidebar = new dhx.Sidebar("sidebar_container", {
// config options

Configuration properties

The detailed information on Sidebar configuration options can be found in the Sidebar API overview article.

Load data into Sidebar

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