Sidebar

Elementric components - just copy the HTML code of an element and paste it into your code (after you read the installation guide).

Standard Sidebar

All sidebars are Responsive.

         
Copy
         
 <div class="standard-sidebar">
   <span class="sidebar-logo">
     <img src="images/logo.svg" alt="logo">
     <p class="logo-name">Elementric</p>
   </span>

   <ul class="standard-sidebar-menu">
     <a href="#"><li class="sidebar-link"><i class="fas fa-home"></i> Home</li></a>
     <a href="#"><li class="sidebar-link"><i class="far fa-newspaper"></i> News</li></a>
     <a href="#"><li class="sidebar-link"><i class="far fa-question-circle"></i> About</li></a>
     <a href="#"><li class="sidebar-link"><i class="fas fa-blog"></i> Blog</li></a>
     <a href="#"><li class="sidebar-link"><i class="fas fa-history"></i> Activity</li></a>
     <a href="#"><li class="sidebar-link"><i class="fas fa-user"></i> Profile</li></a>
   </ul>

   <div class="sidebar-footer">
     <span class="sidebar-right-btn"><a href="#"><i class="fas fa-cog"></i></a></span>
   </div>
 </div>
 <!-- Resonsive Buttons -->
 <button class="button-light sidebar-close" onclick="closeSidebar()"><i class="fas fa-chevron-left"></i></button>
 <button class="button-light sidebar-open" onclick="openSidebar()"><i class="fas fa-chevron-right"></i></button>
         
       

Dark Sidebar

        
Copy
        
  <div class="standard-sidebar dark-sidebar">
    <span class="sidebar-logo">
      <img src="images/logo.svg" alt="logo">
      <p class="logo-name">Elementric</p>
    </span>

    <ul class="standard-sidebar-menu">
      <a href="#"><li class="sidebar-link"><i class="fas fa-home"></i> Home</li></a>
      <a href="#"><li class="sidebar-link"><i class="far fa-newspaper"></i> News</li></a>
      <a href="#"><li class="sidebar-link"><i class="far fa-question-circle"></i> About</li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-blog"></i> Blog</li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-history"></i> Activity</li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-cog"></i> Settings</li></a>
    </ul>

   <div class="sidebar-footer">
     <span class="sidebar-left-btn"><a href="#"><i class="fas fa-user-cog"></i></a></span>
   </div>
  </div>
  <button class="button-dark sidebar-close" onclick="closeSidebar()"><i class="fas fa-chevron-left"></i></button>
  <button class="button-dark sidebar-open" onclick="openSidebar()"><i class="fas fa-chevron-right"></i></button>
        
      

Mini Sidebar

        
Copy
        
  <div class="mini-sidebar">
    <span class="sidebar-logo">
      <a href="#"><img src="images/logo.svg" alt="logo"></a>
    </span>

    <ul class="mini-sidebar-menu">
      <a href="#"><li class="sidebar-link"><i class="fas fa-home"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="far fa-newspaper"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="far fa-question-circle"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-blog"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-history"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-cog"></i></li></a>
    </ul>

    <div class="sidebar-footer">
      <span class="sidebar-left-btn"><a href="#"><i class="fas fa-user-cog"></i></a></span>
    </div>
  </div>
        
      

Mini Dark Sidebar

        
Copy
        
  <div class="mini-sidebar dark-sidebar">
    <span class="sidebar-logo">
      <a href="#"><img src="images/logo.svg" alt="logo"></a>
    </span>

    <ul class="mini-sidebar-menu">
      <a href="#"><li class="sidebar-link"><i class="fas fa-home"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="far fa-newspaper"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="far fa-question-circle"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-blog"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-history"></i></li></a>
      <a href="#"><li class="sidebar-link"><i class="fas fa-cog"></i></li></a>
    </ul>

    <div class="sidebar-footer">
      <span class="sidebar-left-btn"><a href="#"><i class="fas fa-user-cog"></i></a></span>
    </div>
  </div>