Sidebar: Overview | JavaScript UI

Sidebar Overview

The w2sidebar object allows you to create sidebar controls and side panel controls. The sidebar control can have any level of nestedness and will render nodes on demand. If it is used as a side panel control it can have groups.

Example

Below is a simple example how to use the sidebar control. It shows the minimum HTML and JavaScript you need to render the sidebar.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="mySidebar" style="height: 450px; width: 170px"></div>
</body>
<script type="module">
import { w2sidebar } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let sidebar = new w2sidebar({
    name: 'mySidebar',
    nodes: [
        { id: 'level-1', text: 'Level 1', icon: 'w2ui-icon-search', expanded: true,
            nodes: [
                { id: 'level-1-1', text: 'Level 1.1', icon: 'w2ui-icon-info' },
                { id: 'level-1-2', text: 'Level 1.2', icon: 'w2ui-icon-info' },
                { id: 'level-1-3', text: 'Level 1.3', icon: 'w2ui-icon-info' }
                ]
        },
        { id: 'level-2', text: 'Level 2', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'w2ui-icon-search',
                    nodes: [
                        { id: 'level-2-1-1', text: 'Level 2.1.1', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-2', text: 'Level 2.1.2', icon: 'w2ui-icon-info' },
                        { id: 'level-2-1-3', text: 'Level 2.1.3', icon: 'w2ui-icon-info' }
                        ]
                    },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'w2ui-icon-info' },
                { id: 'level-2-3', text: 'Level 2.3', icon: 'w2ui-icon-info' }
            ]
        },
        { id: 'level-3', text: 'Level 3', icon: 'w2ui-icon-search',
            nodes: [
                { id: 'level-3-1', text: 'Level 3.1', icon: 'w2ui-icon-info' },
                { id: 'level-3-2', text: 'Level 3.2', icon: 'w2ui-icon-info' },
                { id: 'level-3-3', text: 'Level 3.3', icon: 'w2ui-icon-info' }
            ]
        }
    ],
    onClick(event) {
        console.log(event.target)
    }
})
sidebar.render('#mySidebar')
</script>
</html>

HTML

Java Script

$('#sidebar').w2sidebar({
name: 'sidebar',
img: null,
nodes: [
{ id: 'level-1', text: 'Level 1', img: 'icon-folder', expanded: true,
nodes: [ { id: 'level-1-1', text: 'Level 1.1', img: 'icon-page' },
       { id: 'level-1-2', text: 'Level 1.2', img: 'icon-page' },
       { id: 'level-1-3', text: 'Level 1.3', img: 'icon-page' }
     ]
},
{ id: 'level-2', text: 'Level 2', img: 'icon-folder',
nodes: [ { id: 'level-2-1', text: 'Level 2.1', img: 'icon-folder',
         nodes: [
           { id: 'level-2-1-1', text: 'Level 2.1.1', img: 'icon-page' },
           { id: 'level-2-1-2', text: 'Level 2.1.2', img: 'icon-page' },
           { id: 'level-2-1-3', text: 'Level 2.1.3', img: 'icon-page' }
     ]},
       { id: 'level-2-2', text: 'Level 2.2', img: 'icon-page' },
       { id: 'level-2-3', text: 'Level 2.3', img: 'icon-page' }
     ]
},
{ id: 'level-3', text: 'Level 3', img: 'icon-folder',
nodes: [ { id: 'level-3-1', text: 'Level 3.1', img: 'icon-page' },
       { id: 'level-3-2', text: 'Level 3.2', img: 'icon-page' },
       { id: 'level-3-3', text: 'Level 3.3', img: 'icon-page' }
     ]
}
],
onClick: function (id, data) {
console.log(id);
}
});