JavaScript Sidebar Widget

Sidebar live demo

Overview

The sidebar menu is easily configurable. Webix allows you to define its behavior and appearance. For example, you can place Sidebar on either side of the screen and add several levels of submenus into it. You can also add a hamburger menu button to your app to hide and show the sidebar.

Sidebar Key Features

Collapsed mode

Sidebar features two display modes. If you are short in space, you can initialize a collapsed Sidebar and browse menu items in the related popup window that shows up on hovering menu items. For even better usability, you can create a toolbar with a hamburger button to collapse and expand the Sidebar on the go.

Right or Left

You can create sidebar menu on either side of the app page. By default, Sidebar is rendered on the left, while the right position can be enabled with a single setting.

Multilevel Sidebar

You can nest several levels of submenus into Sidebar.

Configuring parameters

Using the JSON format, you can quickly define the contents of the sidebar and equip its items with icons. You can specify the height of the Sidebar items, apply a proper CSS class to this widget, define its appearance in collapsed and extended states using a template, etc.

Other navigation widgets

Tabbar

SideMenu

based on reviews of 49 customers