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"
});