Logo

Advance Navs multi-purpose advance navigation examples

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Keen's advance .navi component comes with a variety of options to provide unique looking & multi-purpose naviigations.

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>
						

Notifications 24 New

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9