Code Structure
All code structure will be same you have to add following codes:
<div class="tabby-leftbar"> <ul class="nav nav-tabs material-tabs" role="tablist"> ... </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="menu"> <ul class="list-accordion"> ... </ul> </div> <div role="tabpanel" class="tab-pane" id="task_tab"> <ul class="task-box-list"> ... </ul> </div> <div role="tabpanel" class="tab-pane" id="email_tab"> <div class="compose-btn"> <button type="button" class="btn btn-info btn-block compose-mail"><i class="ico-mode-edit"></i> Compose</button> </div> <ul class="mailbox-list"> ... </ul> <div class="email-label-container"> <h5>Label</h5> <ul class="label-list"> ... </ul> <a href="#" class="add-more-label"><i class="zmdi zmdi-plus"></i> Create Label</a> </div> </div> <div role="tabpanel" class="tab-pane" id="support_tab"> <ul class="support-box-list"> ... </ul> </div> </div> </div>
Full Code Structure
<!doctype html> <html> <head> </head> <body class="leftbar-view"> <!--Topbar Start Here--> <header class="topbar clearfix"> </header> <!--Topbar End Here--> <!--Leftbar Start Here--> <aside class="leftbar material-leftbar"> // Add material-leftbar class with leftbar <div class="tabby-leftbar"> // Tabby leftbar code start here <ul class="nav nav-tabs material-tabs" role="tablist"> ... </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="menu"> <ul class="list-accordion"> ... </ul> </div> <div role="tabpanel" class="tab-pane" id="task_tab"> <ul class="task-box-list"> ... </ul> </div> <div role="tabpanel" class="tab-pane" id="email_tab"> <div class="compose-btn"> <button type="button" class="btn btn-info btn-block compose-mail"><i class="ico-mode-edit"></i> Compose</button> </div> <ul class="mailbox-list"> ... </ul> <div class="email-label-container"> <h5>Label</h5> <ul class="label-list"> ... </ul> <a href="#" class="add-more-label"><i class="zmdi zmdi-plus"></i> Create Label</a> </div> </div> <div role="tabpanel" class="tab-pane" id="support_tab"> <ul class="support-box-list"> ... </ul> </div> </div> </div> </aside> <!--Leftbar End Here--> <!--Page Container Start Here--> <section class="main-container"> <div class="container-fluid"> </div> </section> <!--Page Container End Here--> <!--Rightbar Start Here--> <aside class="rightbar"> </aside> <!--Rightbar End Here--> </body> </html>