Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

Base Examples


      <div class="dropdown">
       <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown">
        Dropdown example
       </a>
       <div class="dropdown-menu dropdown-menu-sm">
        <ul class="navi">
         <li class="navi-item">
          <a class="navi-link active" href="#">
           <span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
           <span class="navi-text">Active</span>
          </a>
         </li>
         <li class="navi-item">
          <a class="navi-link" href="#">
           <span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
           <span class="navi-text">Example Link</span>
          </a>
         </li>
         <li class="navi-item">
          <a class="navi-link disabled" href="#">
           <span class="navi-icon"><i class="flaticon2-calendar-8"></i></span>
           <span class="navi-text">Disabled</span>
          </a>
         </li>
         <li class="navi-item">
          <a class="navi-link" href="#">
           <span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
           <span class="navi-text">Another Link</span>
          </a>
         </li>
        </ul>
       </div>
      </div>
      

Font Weight Options

Use .naviwith .navi-{light|lighter|bold|bolder|boldest}classes to set font weight.


      <div class="dropdown">
       <a href="#" class="btn btn-light-primary font-weight-bold dropdown-toggle" data-toggle="dropdown">
        Dropdown example
       </a>
       <div class="dropdown-menu dropdown-menu-sm">
        <ul class="navi navi-bolder">
         <li class="navi-item">
          <a class="navi-link active" href="#">
           <span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
           <span class="navi-text">Active</span>
          </a>
         </li>
         <li class="navi-item">
          <a class="navi-link" href="#">
           <span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
           <span class="navi-text">Example Link</span>
          </a>
         </li>
         <li class="navi-item">
          <a class="navi-link disabled" href="#">
           <span class="navi-icon"><i class="flaticon2-calendar-8"></i></span>
           <span class="navi-text">Disabled</span>
          </a>
         </li>
         <li class="navi-item">
          <a class="navi-link" href="#">
           <span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
           <span class="navi-text">Another Link</span>
          </a>
         </li>
        </ul>
       </div>
      </div>
      

Header And Footer


                        <ul class="navi">
                            <li class="navi-header font-weight-bold py-5">
                                Jump to:
                                <i class="flaticon2-information" data-toggle="tooltip" data-placement="right" title="Click to learn more..."></i>
                            </li>
                            <li class="navi-separator mb-4"></li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
                                    <span class="navi-text">Messages</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
                                    <span class="navi-text">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-expand"></i></span>
                                    <span class="navi-text">Support Center</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
                                    <span class="navi-text">Profile</span>
                                </a>
                            </li>
                            <li class="navi-separator mt-4"></li>
                        </ul>
                        <div class="navi-footer py-5 ml-5 d-flex justify-content-between">
                            <a href="#" target="_blank" class="btn btn-light-primary font-weight-bold">Sign Out</a>
                            <a href="#" target="_blank" class="btn btn-clean font-weight-bold">Upgrade Plan</a>
                        </div>
                        

Labels


                        <ul class="navi">
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
                              <span class="navi-text">Messages</span>
                              <span class="navi-label">
                                   <span class="label label-danger">2</span>
                              </span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
                              <span class="navi-text">Settings</span>
                              <span class="navi-label">
                                   <span class="label label-inline label-light-primary font-weight-bold">Updated</span>
                              </span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
                              <span class="navi-text">Profile</span>
                              <span class="navi-label">
                                  <span class="label label-inline label-success">New</span>
                              </span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-mail"></i></span>
                              <span class="navi-text">Orders</span>
                              <span class="navi-label">
                                   <span class="label label-inline label-dark">On hold</span>
                              </span>
                          </a>
                         </li>
                        </ul>
      

Arrows


                        <ul class="navi">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-chat-1"></i></span>
                                    <span class="navi-text">Messages</span>
                                    <span class="navi-label">
                                        <span class="label label-light-info font-weight-bold">2</span>
                                    </span>
                                    <span class="navi-arrow"></span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-layers-1"></i></span>
                                    <span class="navi-text">Settings</span>
                                    <span class="navi-label">
                                        <span class="label label-inline label-light-primary font-weight-bold">Updated</span>
                                    </span>
                                    <span class="navi-arrow"></span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
                                    <span class="navi-text">Profile</span>
                                    <span class="navi-label">
                                        <span class="label label-inline label-light-danger font-weight-bold">New</span>
                                    </span>
                                    <span class="navi-arrow"></span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-mail"></i></span>
                                    <span class="navi-text">Orders</span>
                                    <span class="navi-label">
                                        <span class="label label-inline label-light-success font-weight-bold">Pending</span>
                                    </span>
                                    <span class="navi-arrow"></span>
                                </a>
                            </li>
                        </ul>
      

Bullets


                        <ul class="navi">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-bullet">
                                        <i class="bullet"></i>
                                    </span>
                                    <span class="navi-text">Messages</span>
                                    <span class="navi-label">
                                        <span class="label label-danger">2</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-bullet">
                                        <i class="bullet"></i>
                                    </span>
                                    <span class="navi-text">Tasks</span>
                                    <span class="navi-label">
                                        <span class="label label-inline label-light-primary font-weight-bold">Updated</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-bullet">
                                        <i class="bullet bullet-dot"></i>
                                    </span>
                                    <span class="navi-text">Profile</span>
                                    <span class="navi-label">
                                        <span class="label label-inline label-success">New</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-bullet">
                                        <i class="bullet bullet-dot"></i>
                                    </span>
                                    <span class="navi-text">Settings</span>
                                    <span class="navi-label">
                                        <span class="label label-rounded label-light-danger">3</span>
                                    </span>
                                </a>
                            </li>
                        </ul>
      

Sections

Use .navi-sectionto have section for group of navi links.


                        <ul class="navi">
                         <li class="navi-section text-primary text-uppercase  font-weight-bolder pb-0">
                          Section 1
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-analytics"></i></span>
                              <span class="navi-text">Messages</span>
                              <span class="navi-label">
                                      <span class="label label-danger label-rounded">2</span>
                              </span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
                              <span class="navi-text">Settings</span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link">
                              <span class="navi-icon"><i class="flaticon2-layers"></i></span>
                              <span class="navi-text">Profile</span>
                          </a>
                         </li>
                         <li class="navi-section mt-5 text-primary text-uppercase  font-weight-bolder pb-0">
                          Section 2
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-box-1"></i></span>
                              <span class="navi-text">Tasks</span>
                              <span class="navi-label">
                                  <span class="label label-warning label-rounded">5</span>
                              </span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-file"></i></span>
                              <span class="navi-text">Orders</span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-sms"></i></span>
                              <span class="navi-text">Reports</span>
                          </a>
                         </li>
                        </ul>
      

Separator


                        <ul class="navi">
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-analytics"></i></span>
                              <span class="navi-text">Messages</span>
                              <span class="navi-label">
                                  <span class="label label-success label-rounded">2</span>
                              </span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
                              <span class="navi-text">Settings</span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-layers"></i></span>
                              <span class="navi-text">Profile</span>
                          </a>
                         </li>
                         <li class="navi-separator my-4"></li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-box-1"></i></span>
                              <span class="navi-text">Tasks</span>
                              <span class="navi-label">
                                  <span class="label label-info label-rounded">5</span>
                              </span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-file"></i></span>
                              <span class="navi-text">Orders</span>
                          </a>
                         </li>
                         <li class="navi-item">
                          <a class="navi-link" href="#">
                              <span class="navi-icon"><i class="flaticon2-sms"></i></span>
                              <span class="navi-text">Reports</span>
                          </a>
                         </li>
                        </ul>
      

Link Hover And Active Styles

Use .navi-hoverand .navi-activeto have link background color for hover and active states respectively.


                        <ul class="navi navi-hover navi-active">
                            <li class="navi-item">
                                <a class="navi-link active" href="#">
                                    <span class="navi-icon"><i class="flaticon2-analytics"></i></span>
                                    <span class="navi-text">Messages</span>
                                    <span class="navi-label">
                                        <span class="label label-danger label-rounded">2</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
                                    <span class="navi-text">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-layers"></i></span>
                                    <span class="navi-text">Profile</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-box-1"></i></span>
                                    <span class="navi-text">Tasks</span>
                                    <span class="navi-label">
                                        <span class="label label-warning label-rounded">5</span>
                                    </span>
                                </a>
                            </li>
                        </ul>
                        

Link Border Radiuses

Use .naviwith .navi-link-rounded, .navi-link-rounded-lgand .navi-link-rounded-xlclasses to have rounded links.


                        <ul class="navi navi-hover">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-analytics text-danger"></i></span>
                                    <span class="navi-text">Messages</span>
                                    <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-pie-chart-2  text-warning"></i></span>
                                    <span class="navi-text">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-box-1  text-success"></i></span>
                                    <span class="navi-text">Tasks</span>
                                    <span class="navi-label">
                                        <span class="label label-warning label-rounded">5</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-file  text-primary"></i></span>
                                    <span class="navi-text">Orders</span>
                                </a>
                            </li>
                        </ul>
                        

Accent Style

Use .navi-accentto have navi link active state with vertical bar ahead.


                        <ul class="navi navi-hover navi-active navi-accent navi-link-rounded-lg">
                            <li class="navi-item">
                                <a class="navi-link active" href="#">
                                    <span class="navi-icon"><i class="flaticon2-analytics"></i></span>
                                    <span class="navi-text">Messages</span>
                                    <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
                                    <span class="navi-text">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-box-1"></i></span>
                                    <span class="navi-text">Tasks</span>
                                    <span class="navi-label">
                                        <span class="label label-warning label-rounded">5</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-file"></i></span>
                                    <span class="navi-text">Orders</span>
                                </a>
                            </li>
                        </ul>
      

                        <ul class="navi navi-hover navi-active navi-accent">
                            <li class="navi-item">
                                <a class="navi-link active" href="#">
                                    <span class="navi-icon"><i class="flaticon2-analytics"></i></span>
                                    <span class="navi-text">Messages</span>
                                    <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
                                    <span class="navi-text">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-box-1"></i></span>
                                    <span class="navi-text">Tasks</span>
                                    <span class="navi-label">
                                        <span class="label label-warning label-rounded">5</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-file"></i></span>
                                    <span class="navi-text">Orders</span>
                                </a>
                            </li>
                        </ul>
      

Circle Icon Style

Use .navi-circle-iconto have navi link active state with vertical bar ahead.


                        <ul class="navi navi-hover navi-active">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 symbol-circle mr-3">
                      <span class="symbol-label"><i class="flaticon2-analytics text-danger"></i></span>
                     </span>
                                    <span class="navi-text">Messages</span>
                                    <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 symbol-circle mr-3">
                      <span class="symbol-label"><i class="flaticon2-pie-chart-2  text-warning"></i></span>
                     </span>
                                    <span class="navi-text">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 symbol-circle mr-3">
                      <span class="symbol-label"><i class="flaticon2-box-1  text-success"></i></span>
                     </span>
                                    <span class="navi-text">Tasks</span>
                                    <span class="navi-label">
                                        <span class="label label-warning label-rounded">5</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 symbol-circle mr-3">
                      <span class="symbol-label"><i class="flaticon2-file  text-primary"></i></span>
                     </span>
                                    <span class="navi-text">Orders</span>
                                </a>
                            </li>
                        </ul>
      

Title & Description


                        <ul class="navi navi-hover navi-active">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 mr-3">
                                        <span class="symbol-label"><i class="flaticon2-analytics text-danger"></i></span>
                                    </span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Messages</span>
                                        <span class="text-muted">Inbox and notifications</span>
                                    </div>
                                    <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 mr-3">
                                        <span class="symbol-label"><i class="flaticon2-pie-chart-2  text-warning"></i></span>
                                    </span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Settings</span>
                                        <span class="text-muted">Applications & services</span>
                                    </div>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 mr-3">
                                        <span class="symbol-label"><i class="flaticon2-box-1  text-success"></i></span>
                                    </span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Tasks</span>
                                        <span class="text-muted">Project & tasks</span>
                                    </div>
                                    <span class="navi-label">
                                        <span class="label label-warning label-rounded">5</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="symbol symbol-50 mr-3">
                                        <span class="symbol-label"><i class="flaticon2-file  text-primary"></i></span>
                                    </span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Orders</span>
                                        <span class="text-muted">eCommernce orders</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
      

Notification Style


                        <ul class="navi navi-hover navi-active">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-analytics text-danger"></i></span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Messages</span>
                                        <span class="text-muted">Inbox and notifications</span>
                                    </div>
                                    <span class="label label-light-danger font-weight-bold label-inline">new</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-pie-chart-2  text-warning"></i></span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Settings</span>
                                        <span class="text-muted">Applications & services</span>
                                    </div>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-box-1  text-success"></i></span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Tasks</span>
                                        <span class="text-muted">Project & tasks</span>
                                    </div>
                                    <span class="navi-label">
                                        <span class="label label-warning label-rounded">5</span>
                                    </span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-file  text-primary"></i></span>
                                    <div class="navi-text">
                                        <span class="d-block font-weight-bold">Orders</span>
                                        <span class="text-muted">eCommernce orders</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
      

Border Style


                        <ul class="navi navi-border">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-analytics"></i></span>
                                    <span class="navi-text">Messages</span>
                                    <span class="label label-danger label-rounded">2</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-pie-chart-2"></i></span>
                                    <span class="navi-text">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-box-1"></i></span>
                                    <span class="navi-text">Tasks</span>
                                    <span class="label label-warning label-rounded">5</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-icon"><i class="flaticon2-file"></i></span>
                                    <span class="navi-text">Orders</span>
                                </a>
                            </li>
                        </ul>
      

Custom Examples


                        <ul class="navi navi-accent navi-hover navi-bold">
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-text font-size-lg">Messages</span>
                                    <span class="label label-danger label-rounded">2</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link active" href="#">
                                    <span class="navi-text font-size-lg">Settings</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-text font-size-lg">Tasks</span>
                                    <span class="label label-warning label-rounded">5</span>
                                </a>
                            </li>
                            <li class="navi-item">
                                <a class="navi-link" href="#">
                                    <span class="navi-text font-weight-bold font-size-lg">Orders</span>
                                </a>
                            </li>
                        </ul>
      

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo