Configuration

Width

It is easy to change the width of a sidebar with the help of the width configuration option. By default it is set to 200px. Set the desired value in the configuration object of the component:

var sidebar = new dhx.Sidebar(document.body, {
    css: "dhx_widget--border_right",
    width: "450"
});

Collapsed mode

To initialize a sidebar in the collapsed state, make use of the collapsed property. This is what Sidebar looks like in the collapsed mode:

var sidebar = new dhx.Sidebar(document.body, {
    css: "dhx_widget--border_right",
    collapsed: true
});

Minimal width

In order to set the minimal width of a sidebar in the collapsed state, you can use the minWidth property. By default it is set to 69px.

var sidebar = new dhx.Sidebar(document.body, {
    css: "dhx_widget--border_right",
    minWidth: 80,
    collapsed: true
});
Back to top