Object that defineds node handle If the handle property is defined, then next to each node a handled will be displayed. This handle can be used to insert some html element in front of the node. The handle property has the following structure: { text : '' // string or function, html of the handle tooltip : '', // string or function, tooltip for the handle width : 0, // the size of the handle, needed to calc node padding style : '', // style for the handle onClick : function // on click event handler } You can define nodes during object creation: let sidebar = new w2sidebar({ name : 'sidebar', img : 'icon-page', handle: { text: '<div onclick="w2ui.steps.setBreakPoint(this, event)"></div>' width: 18, style: 'height: 22px; width: 20px; margin-top: 0px; margin-left: -15px;', onClick(node) { console.log('Handle clicked', event.detail) } }, nodes: [ { id: 'id-1', text: 'Level 1' }, { id: 'id-2', text: 'Level 2' }, { id: 'id-3', text: 'Level 3' } ] }) or after the object has been created: w2ui.sidebar.handle = { text: '<div onclick="w2ui.steps.setBreakPoint(this, event)"></div>' width: 18, style: 'height: 22px; width: 20px; margin-top: 0px; margin-left: -15px;', onClick(node) { console.log('Handle clicked', event.detail) } } w2ui.sidebar.refresh()