Skip to main content

Configuration

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:

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

Related sample: Sidebar. Collapsed

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.

const sidebar = new dhx.Sidebar("sidebar_container", {
css: "dhx_widget--border_right",
minWidth: 80,
collapsed: true
});

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:

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