Dropdown

Dropdown can be useful when you want to spread menus below the button.

Basic

You can open a dropdown menu by hovering the button.
Also, you can add content via dropdown-content--item.

Hover

<div class="dropdown">
  <button class="dropdown-button outset-neomo">
    Dropdown
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JAVA</a>
    <a href="#">C++</a>
  </div>
</div>
 
                               Text has been copied to the clipboard.
                               ×

Content

<div class="dropdown">
  <button class="dropdown-button outset-neomo">
    Dropdown Content
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <div class="dropdown-content--item">
      <p>
        You can insert any type of content with dropdown-content--item class.
      </p>
    </div>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">JAVA</a>
  </div>
</div>
 
                               Text has been copied to the clipboard.
                               ×

Toggle

You can open a dropdown menu by clicking the button.

Toggle

<div style="text-align: center">
  <div class="dropdown-toggle">
    <button
      data-dropdown-id="dropdown"
      class="dropdown-toggle--button outset-neomo"
    >
      Toggle
      <i class="fa fa-caret-down"></i>
    </button>
    <div data-dropdown-id="dropdown" class="dropdown-toggle--content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
 
                               Text has been copied to the clipboard.
                               ×

Basic
Toggle