Sidebar

The sidebar comes in two flavors: classic and light. The classic variant should be used as navigation in touch-heavy environments because of the size of the items. If you have more screen space and more precise pointers like a mouse, the light variant can be preferred.

The last version combines these two variant into a responsive version.

Classic Variant

<aside class="sidebar"><div class="sidebar-item sidebar-item-active"><div class="sidebar-item-icon">dashboard</div><div class="sidebar-item-text">Cockpit</div></div><div class="sidebar-item"><div class="sidebar-item-icon">list</div><div class="sidebar-item-text">Order List</div></div><div class="sidebar-item"><div class="sidebar-item-icon">show_chart</div><div class="sidebar-item-text">Timeline</div></div></aside>

Light Variant

<aside class="sidebar-light"><div class="sidebar-light-item sidebar-light-item-active"><div class="sidebar-light-item-icon">dashboard</div><div class="sidebar-light-item-text">Cockpit</div></div><div class="sidebar-light-item"><div class="sidebar-light-item-icon">list</div><div class="sidebar-light-item-text">Order List</div></div><div class="sidebar-light-item"><div class="sidebar-light-item-icon">show_chart</div><div class="sidebar-light-item-text">Timeline</div></div></aside>

Responsive Variant

<aside class="sidebar lg:sidebar-light"><div class="sidebar-item lg:sidebar-light-item sidebar-item-active lg:sidebar-light-item-active"><div class="sidebar-item-icon lg:sidebar-light-item-icon">dashboard</div><div class="sidebar-item-text lg:sidebar-light-item-text">Cockpit</div></div><div class="sidebar-item lg:sidebar-light-item"><div class="sidebar-item-icon lg:sidebar-light-item-icon">list</div><div class="sidebar-item-text lg:sidebar-light-item-text">Order List</div></div><div class="sidebar-item lg:sidebar-light-item"><div class="sidebar-item-icon lg:sidebar-light-item-icon">show_chart</div><div class="sidebar-item-text lg:sidebar-light-item-text">Timeline</div></div></aside>