Advance Navs
Metronic's advance
.navi component comes with a variety of options to provide unique looking & multi-purpose naviigations.
Base Examples
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>
Font Weight Options
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>
Header And Footer
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>
Labels
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>
Arrows
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>
Bullets
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>
Sections
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>
Separator
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>
Link Hover And Active Styles
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>
Link Border Radiuses
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>
Accent Style
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>
Circle Icon Style
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>
Title & Description
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>
Notification Style
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>
Border Style
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>
Custom Examples
Use Bootstrap and Metronic 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>
