Logo

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>
      

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%