Sidebar UI widget

HTML5 Sidebar is a component that has a hierarchical structure of elements and can be collapsed into a navigation bar. The purpose of this JavaScript sidebar is to give your users access to the most frequently used functions of the application and save space.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

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.

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.

Multilevel Sidebar

You can nest several levels of submenus into Sidebar.

Open Sidebar options to see nested submenus

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.