[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

###### 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

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.

Sign In

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.

See License

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

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