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%

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

Select A Demo