Sidebar

External resources

Overview

Webix Sidebar is a Tree-based component which is used for creating menus with hierarchical structure.

JS files for Sidebar menu isn't included into Webix lib package and should be taken from https://github.com/webix-hub/components.

Sidebar menu can be collapsed into a navigation bar with only icons of the menu items visible. On hovering an icon, a popup with the related item is shown with its sub-items.

On clicking a Sidebar menu item, either the related content is shown in the right part of the screen or selectable sub-items are displayed.



Creating a Sidebar Menu

Files to include

You need to include the following files on your page:

<!-- js files -->
<script src="codebase/webix.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="//cdn.webix.com/components/sidebar/sidebar.js"></script>
 
<!-- css files -->
<link rel="stylesheet" href="codebase/webix.css" type="text/css" charset="utf-8">
<link 
    rel="stylesheet" 
    type="text/css" 
    href="//cdn.webix.com/components/sidebar/sidebar.css"
>

Initialization

To initialize the Sidebar and load it with data, you need to use the code as in:

// webix.ready() function ensures that the code will be executed when the page is loaded
webix.ready(function(){
    // object constructor
    webix.ui({
        view: "sidebar",
        // setting the data source
        data: menu_data
    });
});

Data source

Sidebar can load data from various sources in different formats. You can find more information in the Loading Data into Tree article.

The Sidebar data configuration contains the description of menu items, corresponding icons and sub-items. It can look like this:

var menu_data = [
    {id: "dashboard", icon: "dashboard", value: "Dashboards",  data:[
        { id: "dashboard1", value: "Dashboard 1"},
        { id: "dashboard2", value: "Dashboard 2"}
    ]},
    {id: "layouts", icon: "columns", value:"Layouts", data:[
        { id: "accordions", value: "Accordions"},
        { id: "portlets", value: "Portlets"}
    ]},
    {id: "tables", icon: "table", value:"Data Tables", data:[
        { id: "tables1", value: "Datatable"},
        { id: "tables2", value: "TreeTable"},
        { id: "tables3", value: "Pivot"}
    ]},
    ...
];

Related sample:  SideBar Menu

How to add the Menu button

Adding the Menu button in the left top corner allows collapsing the menu items into a vertical navigation bar with icons. In this state menu items will be shown by hovering the mouse pointer over the icons.

Let's create a layout with a toolbar and two columns. We'll place a button on the toolbar and put a sidebar in the left column, the right column will serve as a template for some content that could be shown on an item's click.

webix.ui({
    rows: [
        { view: "toolbar", elements: [
            {   view: "button", 
                type: "icon", 
                icon: "bars",
                width: 37, 
                align: "left", 
                css: "app_button", 
                click: function(){
                    $$("$sidebar1").toggle()
                }
            },
        ]},
        {
            cols:[
                {
                    view: "sidebar",
                    data: menu_data         
                },
                {
                    template: ""
                }
            ]
        }
    ]
});

The applied button uses the "bars" icon from the Font Awesome collection. You can set its position using the align property and specifying a CSS style, like this one:

.app_button button{
    padding:0;
    text-align: center;
}

To collapse/expand the menu on the button click, we define the click handler in which we put the toggle() function. The details are given in the API reference.

The image below shows how an expanded Sidebar menu collapses on the Menu button click:

Data Visualization

Sidebar allows configuring the templates of its items. The Data Templates are described in the Type Implementation of Sidebar:

webix.type(webix.ui.tree, {
    name:"sideBar",
    height: "auto"
    ...
});

name

defines the Sidebar name

{
    name:"sideBar"
}

height

specifies the height of an item in the Sidebar

{
    height: "auto"
}

css

specifies the CSS class applied to the Sidebar

{
    css: "webix_sidebar"
}

template

defines the appearance of the Sidebar in the collapsed and expanded states

template: function(obj, common){
    if(common.collapsed)
        return common.icon(obj, common);
    return common.arrow(obj, common)+common.icon(obj, common) +"<span>"+obj.value+"</span>";
}

arrow

defines the presentation of arrows, depending on the level of the related Sidebar items

arrow: function(obj, common){
    var html = "";
    var open = "";
    for (var i=1; i<=obj.$level; i++){
        if (i==obj.$level && obj.$count){
            var icon = " fa-angle-"+(obj.open?"down":"left");
            html+="<span class='webix_sidebar_dir_icon webix_icon"+icon+"'></span>";
        }
    }
    return html;
},

icon

specifies a template for rendering Font Awesome icons next to the items of Sidebar

icon:function(obj, common){
    if(obj.icon)
        return "<span class='webix_icon webix_sidebar_icon fa-"+obj.icon+"'></span>";
    return "";
}

API Reference

Sidebar inherits the most part of API from the Tree component. Follow the ui.tree API page to find the necessary method,event or property.

Besides, Sidebar has its own methods and properties. You can find them in the list below:

Methods

getPopup()

returns the popup's object

sidebar.getPopup();

returns:

  • {object} the popup's object

getPopupTitle()

returns a Template view with a popup title (a branch's name)

sidebar.getPopupTitle();

returns:

  • {object} a Template view containing the popup title

getPopupList()

returns a List view of the Popup of SideBar

sidebar.getPopupList();

returns:

  • {object} a List view containing child items

collapse()

collapses the sidebar into a navigation bar

sidebar.collapse();

expand()

expands the sidebar from the collapsed state

sidebar.expand();

toggle()

collapses an expanded Sidebar and expands a collapsed Sidebar

sidebar.toggle();

Properties

collapsed

defines if the Sidebar will be shown in the collapsed state or in the expanded one

  • value - {boolean} true for collapsed state, false for the expanded one
webix.ui({
    view: "sidebar",
    collapsed:true   
});

position

sets the position of SideBar

Parameters:

  • value - {string} a new position of SideBar ("right" or "left")
webix.ui({
    view: "sidebar",
    position:"right"   
});
Back to top