v2.1.0

Dropdown

  • Basic

    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>
    

    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>
    
  • Toggle

    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>