Dropdown

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

Standard Dropdown

          
Copy
          
  <div class="dropdown-main">
      <button type="button" onclick="dropdownBtn(this)" class="button-dark" id="dropdown-btn">Dropdown <i class="fas fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
          
        

Header Dropdown

          
Copy
          
  <div class="dropdown-main">
      <button type="button" onclick="dropdownBtn(this)" class="button-dark" id="dropdown-btn">Dropdown <i class="fas fa-caret-down"></i></button>
    <div class="dropdown-content">
      <p>Header</p>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
          
        

Hover Dropdown

          
Copy
          
  <div class="dropdown-main dropdown-hover">
      <button type="button" class="button-standard">Dropdown <i class="fas fa-caret-down"></i></button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
          
        

Mega Dropdown

You can choose how many collumns you want for mega dropdown menu with a value between 2 and 5 indropdown-collumns="" attribute.

           
Copy
           
  <div class="dropdown-main">
     <button type="button" onclick="dropdownBtn(this)" class="button-standard" id="dropdown-btn">Mega Dropdown <i class="fas fa-caret-down"></i></button>
   <div class="dropdown-content mega-dropdown" dropdown-collumns="5">
     <div class="col-menu">
       <p>Header 1</p>
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
     </div>

     <div class="col-menu">
       <p>Header 2</p>
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
     </div>

     <div class="col-menu">
       <p>Header 3</p>
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
     </div>

     <div class="col-menu">
       <p>Header 4</p>
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
     </div>

     <div class="col-menu">
       <p>Header 5</p>
       <a href="#">Link 1</a>
       <a href="#">Link 2</a>
       <a href="#">Link 3</a>
     </div>
   </div>
  </div>
           
         

Dark Dropdown

           
Copy
           
 <div class="dropdown-main">
     <button type="button" onclick="dropdownBtn(this)" class="button-dark" id="dropdown-btn">Dropdown <i class="fas fa-caret-down"></i></button>
   <div class="dropdown-content background-dark">
     <a href="#">Link 1</a>
     <a href="#">Link 2</a>
     <a href="#">Link 3</a>
   </div>
 </div>