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 .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


                        <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


                        <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-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


                        <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-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


                        <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>
						

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