Dropdown Menu

Any button can be turned into a dropdown toggle.

Source Code

<div class="dropdown">
  <a href="" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
    <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
      <span class="mg-r-10 tx-13 tx-medium">John Doe</span>
      <img src="../img/img7.jpg" class="wd-25 rounded-circle" alt="">
      <i class="fa fa-angle-down mg-l-10"></i>
    </div>
  </a>
  <div class="dropdown-menu pd-10 wd-200">
    <nav class="nav nav-style-1 flex-column">
      <a href="" class="nav-link"><i class="icon ion-ios-person"></i> Edit Profile</a>
      <a href="" class="nav-link"><i class="icon ion-ios-gear"></i> Settings</a>
      <a href="" class="nav-link"><i class="icon ion-ios-download"></i> Downloads</a>
    </nav>
  </div><!-- dropdown-menu -->
</div><!-- dropdown -->

Styled Dropdown Menu

A dropdown menu with a styled nav menu inside dropdown-menu class.

Source Code

<div class="dropdown">
  <a href="" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
    <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
      <span class="mg-r-10 tx-13 tx-medium">John Doe</span>
      <img src="../img/img7.jpg" class="wd-25 rounded-circle" alt="">
      <i class="fa fa-angle-down mg-l-10"></i>
    </div>
  </a>
  <div class="dropdown-menu pd-10 wd-200">
    <nav class="nav nav-style-2 flex-column">
      <a href="" class="nav-link"><i class="icon ion-ios-person"></i> Edit Profile</a>
      <a href="" class="nav-link"><i class="icon ion-ios-gear"></i> Settings</a>
      <a href="" class="nav-link"><i class="icon ion-ios-download"></i> Downloads</a>
    </nav>
  </div><!-- dropdown-menu -->
</div><!-- dropdown -->

Dropdown With Media List

A dropdown menu with a media list inside dropdown-menu class.

Source Code

<div class="dropdown">
  <a href="" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
    <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
      <span class="mg-r-10 tx-13 tx-medium">View Messages</span>
      <i class="fa fa-angle-down mg-l-5"></i>
    </div>
  </a>
  <div class="dropdown-menu wd-300 pd-0">
    <div class="d-flex align-items-center justify-content-between pd-y-10 pd-x-20 bd-b bd-gray-200">
      <label class="tx-11 tx-info tx-uppercase tx-bold tx-spacing-2 mg-b-0">Messages</label>
      <a href="" class="tx-11 tx-info">+ Add New Message</a>
    </div><!-- d-flex -->

    <div class="media-list">
    <a href="" class="media-list-link">
      <div class="media pd-x-20 pd-y-15">
        <img src="../img/img3.jpg" class="wd-40 rounded-circle" alt="">
        <div class="media-body pd-l-15">
          <div class="d-flex align-items-center justify-content-between mg-b-5">
            <p class="mg-b-0 tx-medium tx-gray-800 tx-13">Donna Seay</p>
            <span class="tx-11 tx-gray-500">2 minutes ago</span>
          </div><!-- d-flex -->
          <p class="tx-12 tx-gray-600 mg-b-0">A wonderful serenity...</p>
        </div>
      </div><!-- media -->
    </a><!-- media-list-link -->
    </div><!-- media-list -->
  </div><!-- dropdown-menu -->
</div><!-- dropdown -->

Dropdown With Form

A dropdown menu with a form elements wrapped inside by dropdown-menu class.

Source Code

<div class="dropdown stay-open">
  <a href="#" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
    <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
      <span class="mg-r-10 tx-13 tx-medium">Sign In</span><i class="fa fa-angle-down mg-l-5"></i>
    </div>
  </a>
  <div class="dropdown-menu bg-white pd-40 wd-350">
    <h6 class="tx-gray-800 tx-uppercase tx-bold">Sign In</h6>
    <p class="tx-gray-600 mg-b-30">Signin using your account credentials.</p>

    <div class="form-group">
      <input type="email" class="form-control pd-y-12" placeholder="Email">
    </div><!-- form-group -->
    <div class="form-group">
      <input type="password" class="form-control pd-y-12" placeholder="Password">
    </div><!-- form-group -->

    <div class="form-group"><a href="" class="tx-12">Forgot password?</a></div>
    <button class="btn btn-primary btn-block pd-y-10 mg-b-30">Sign In</button>

    <p class="tx-11 tx-uppercase tx-spacing-2">Or Sign In With</p>
    <a href="#" class="btn btn-primary btn-icon"><div><i class="fab fa-facebook"></i></div></a>
    <a href="#" class="btn btn-info btn-icon mg-l-5"><div><i class="fab fa-twitter"></i></div></a>
    <a href="#" class="btn btn-danger btn-icon mg-l-5"><div><i class="fa fa-google-plus"></i></div></a>
  </div><!-- dropdown-menu -->
</div><!-- dropdown -->

Class Reference

Class	Description
stay-open	Add this class to prevent dropdown from closing when user clicked inside dropdown.

Javascript Code

$(document).on('click', '.stay-open .dropdown-menu', function (e) {
  e.stopPropagation();
});

The above code controls the dropdown from closing when user click inside of a dropdown. Useful when you have link or button inside the dropdown.

Dropdown With Tabs

A dropdown menu with a tab menu and it's content wrapped by dropdown-menu class.

Source Code

<div class="dropdown stay-open">
  <a href="#" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
    <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
      <span class="mg-r-10 tx-13 tx-medium">See License</span>
      <i class="fa fa-angle-down mg-l-5"></i>
    </div>
  </a>
  <div class="dropdown-menu bg-white pd-0 wd-350">
    <ul class="nav nav-tabs nav-tabs-style-1 nav-justified tx-13" role="tablist">
      <li class="nav-item">
        <a class="nav-link pd-y-10 active" data-toggle="tab" href="#tabRegular" role="tab">Regular</a>
      </li>
      <li class="nav-item">
        <a class="nav-link pd-y-10" data-toggle="tab" href="#tabExtended" role="tab">Extended</a>
      </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content pd-30">
      <div class="tab-pane active" id="tabRegular" role="tabpanel">
        <!-- content goes here -->
      </div>
      <div class="tab-pane" id="tabExtended" role="tabpanel">
        <!-- content goes here -->
      </div>
    </div>
  </div><!-- dropdown-menu -->
</div><!-- dropdown -->

Dropdown With Advanced Menu

A dropdown menu that contains several links and image using grid columns.

Source Code

<div class="dropdown stay-open">
  <a href="#" class="tx-gray-800 d-inline-block" data-toggle="dropdown">
    <div class="ht-45 pd-x-20 bd d-flex align-items-center justify-content-center">
      <span class="mg-r-10 tx-13 tx-medium">Shop Category</span>
      <i class="fa fa-angle-down mg-l-5"></i>
    </div>
  </a>
  <div class="dropdown-menu bg-white pd-0 wd-450">
    <div class="row">
      <div class="col-5">
        <div class="pd-l-30 pd-t-30">
          <h6 class="tx-info tx-normal mg-b-15">Shop Fashion</h6>
          <ul class="list-unstyled lh-10 tx-13">
            <li><a href="" class="tx-gray-700">Women</a></li>
            <li><a href="" class="tx-gray-700">Men</a></li>
            <li><a href="" class="tx-gray-700">Girls</a></li>
          </ul>
          <a href="" class="btn btn-outline-info d-block mg-t-20 tx-12">Edit Categories</a>
        </div>
      </div><!-- col -->
      <div class="col-7">
        <img src="../img/img16.jpg" class="img-fluid mg-t-10" alt="">
      </div><!-- col -->
    </div><!-- row -->
  </div><!-- dropdown-menu -->
</div><!-- dropdown -->