Dropdown Menu

Any button can be turned into a dropdown toggle.

John Doe

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="https://via.placeholder.com/500" 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.

John Doe

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="https://via.placeholder.com/500" 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.

View Messages

Messages+ Add New Message

Donna Seay

2 minutes ago

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

Samantha Francis

3 hours ago

My entire soul, like these sweet mornings of spring.

Robert Walker

5 hours ago

I should be incapable of drawing a single stroke at the present moment...

Show All Messages

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="https://via.placeholder.com/500" 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

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.

Shop Category

Shop Fashion

• Women
• Men
• Girls
• Boys
• Baby
• Luggage

More to Explore

Our BrandsExclusive to customers who are members.

---

Subscribe & SaveExclusive to customers who are members.Edit Categories

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="https://via.placeholder.com/972x1920" class="img-fluid mg-t-10" alt="">      </div><!-- col -->    </div><!-- row -->  </div><!-- dropdown-menu --></div><!-- dropdown -->