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

No attachments yet.

No events scheduled today.

Sound Notification

Play an alert sound everytime there is a new notification.

2 Steps Verification

Sign in using a two step verification by sending a verification code to your phone.

Navigation Layouts

Navigation share general markup and styles, from the base .nav class to the active and disabled states.

Horizontal Navbar Layout

Below is an example of different navbar layouts.

Logo

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-between">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-20">Logo</h4>
  <a href="" class="tx-gray-600 hover-dark tx-18"><i class="fa fa-navicon"></i></a>
</div><!-- ht-65 -->

Logo

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-between mg-t-20">
  <a href="" class="tx-gray-600 hover-dark tx-18"><i class="fa fa-navicon"></i></a>
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-20">Logo</h4>
  <div>
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Logo

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-start mg-t-20">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse mg-r-20 tx-poppins">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
  <div class="mg-l-auto">
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Logo

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-between mg-t-20">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-20">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
  <div>
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Logo

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-end mg-t-20">
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse tx-poppins mg-r-auto">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">About</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
  <div class="mg-l-20">
    <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
    <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
  </div>
</div><!-- ht-65 -->

Logo

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-20 d-flex align-items-center justify-content-center mg-t-20">
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#" role="tab">Home</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">About</a></li>
  </ul>
  <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-inverse pd-x-30 tx-poppins">Logo</h4>
  <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Services</a></li>
    <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#" role="tab">Contact</a></li>
  </ul>
</div><!-- ht-65 -->

Item List

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-15 d-flex align-items-center justify-content-between mg-t-20">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-left"></i></button>
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-right"></i></button>
  </div>
  <h5 class="tx-bold tx-spacing-2 mg-b-0 tx-inverse">Item List</h5>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th"></i></button>
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th-list"></i></button>
  </div>
</div><!-- ht-65 -->

Source Code

<div class="ht-65 bd bg-gray-100 pd-x-15 d-flex align-items-center justify-content-between mg-t-20">
  <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-left"></i></button>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th"></i></button>
    <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th-list"></i></button>
  </div>
  <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-right"></i></button>
</div><!-- ht-65 -->