.navi component comes with a variety of options to provide unique looking & multi-purpose naviigations.
Use .navi to have vertical navigations for inline and dropdown modes.
<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>
Use .navi with .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>
Use .navi-header and .navi-footer to have a 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>
Use .navi-label with .label component to have label for navigation links.
<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>
Use .navi-arrow to have navigation links with 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>
Use .navi-bullet with .bullet component navi links with line and dot 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>
Use .navi-section to 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>
Use .navi-separator to have navi with separators.
<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>
Use .navi-hover and .navi-active to 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>
Use .navi with .navi-link-rounded, .navi-link-rounded-lg and .navi-link-rounded-xl classes 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>
Use .navi-accent to 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>
Use .navi-{color} to change color with bootstrap colors.
<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>
Use .navi-circle-icon to 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>
Add custom tags in .navi-text to have link with title and 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>
Add custom tags in .navi-text to have link with title and description.
<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>
Use .navi-border to have navigation links with border.
<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>
Use Bootstrap and Keen utilities to have custom navigation.
<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>
Lorem Ipsum is simply dummy text of the printing and industry.
There are many variations of passages of Lorem Ipsum available.
Contrary to popular belief, Lorem Ipsum is not simply random text.
If you are going to use a passage of Lorem Ipsum, you need.
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
To start a blog, think of a topic about and first brainstorm ways to write details
