View Demo Buy Now Our Portfolio

Navigation Style

Horizontal Left-menu

Skin Modes

Default Mode
White Mode
Dark Mode

Header Styles Mode

Light Menu
Dark Menu
Color Menu
Graident Menu

Horizontalmenu Styles Mode

Color Menu
Light Menu
Dark Menu
Gradient-Color Menu
Loader
logo
View all Notification
3
See all Messages
img
English
flag-img
French
flag-img
Germany
flag-img
Italy
flag-img
Russia
flag-img
Spain
profile-user
Jacob Fisher
My Profile Edit Profile Account Settings Inbox Message Need help? Sign out

Navigation

  1. Elements
  2. Navigation
Add Order Add User

Basic Nav

<ul class="nav1">
	<li class="nav-item1">
		<a class="nav-link active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled" href="#">Disabled</a>
	</li>
</ul>

Nav Vertical

<ul class="nav1 flex-column">
	<li class="nav-item1">
		<a class="nav-link active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled" href="#">Disabled</a>
	</li>
</ul>

Dropdown Nav

<nav class="navbar navbar-expand-lg navbar-light bg-light br-5">
	<ul class="navbar-nav">
		<li class="nav-item">
			<a class="nav-link active" href="#">Home</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">Link</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">Link</a>
		</li>
		<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			Dropdown link
			</a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
				<a class="dropdown-item" href="#">Action</a>
				<a class="dropdown-item" href="#">Another action</a>
				<a class="dropdown-item" href="#">Something else here</a>
			</div>
		</li>
		<li class="nav-item">
			<a class="nav-link disabled" href="#">Disabled</a>
		</li>
	</ul>
</nav>

Nav Tabs

<ul class="nav nav-pills flex-column flex-sm-row" id="tabs-text" role="tablist">
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab"  aria-selected="false">UI/UX Design</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-selected="false">Programming</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border active show pt-3 pb-3 pl-5 pr-5 m-2" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab"  aria-selected="true">Graphic</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tabs-text-4-tab" data-toggle="tab" href="#tabs-text-4" role="tab" aria-selected="false">Developing</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tabs-text-5-tab" data-toggle="tab" href="#tabs-text-5" role="tab" aria-selected="false">Photoshop</a>
	</li>
</ul>

Icon With Title

<ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tab1" data-toggle="tab" href="#tabs_2_1" role="tab" aria-selected="false">
			<span class="nav-link-icon d-block"><i class="fe fe-home"></i> Home</span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tab2" data-toggle="tab" href="#tabs_2_2" role="tab"  aria-selected="false">
			<span class="nav-link-icon d-block"><i class="fe fe-unlock"></i> Lock </span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link pt-3 pb-3 pl-5 pr-5 border active show m-2" id="tab3" data-toggle="tab" href="#tabs_2_3" role="tab" aria-selected="true">
			<span class="nav-link-icon d-block"><i class="fe fe-play"></i> Videos</span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tab4" data-toggle="tab" href="#tabs_2_3" role="tab" aria-selected="false">
			<span class="nav-link-icon d-block"><i class="fe fe-layers"></i> Severs</span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border pt-3 pb-3 pl-5 pr-5 m-2" id="tab5" data-toggle="tab" href="#tabs_2_4" role="tab" aria-selected="false">
			<span class="nav-link-icon d-block"><i class="fe fe-image"></i> Gallery </span>
		</a>
	</li>
</ul>

Icon Nav Bar

<ul class="nav nav-pills nav-pills-circle" id="tabs_3" role="tablist">
	<li class="nav-item">
		<a class="nav-link border w-8 h-8 text-center br-100 m-2" id="tab21" data-toggle="tab" href="#tabs_2_1" role="tab" aria-controls="tab1" aria-selected="false">
			<span class="nav-link-icon d-block text-center mx-auto"><i class="fe fe-home"></i></span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border w-8 h-8 br-100 m-2" id="tab22" data-toggle="tab" href="#tabs_2_2" role="tab" aria-controls="tab2" aria-selected="false">
			<span class="nav-link-icon d-block text-center mx-auto"><i class="fe fe-unlock"></i></span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border active show w-8 h-8 br-100 m-2" id="tab23" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="tab3" aria-selected="true">
			<span class="nav-link-icon d-block text-center mx-auto"><i class="fe fe-play"></i></span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border w-8 h-8 br-100 m-2" id="tab24" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="tab4" aria-selected="false">
			<span class="nav-link-icon d-block text-center mx-auto"><i class="fe fe-layers"></i></span>
		</a>
	</li>
	<li class="nav-item">
		<a class="nav-link border  w-8 h-8 br-100 m-2" id="tab25" data-toggle="tab" href="#tabs_2_4" role="tab" aria-controls="tab5" aria-selected="false">
			<span class="nav-link-icon d-block text-center mx-auto"><i class="fe fe-image"></i> </span>
		</a>
	</li>
</ul>

Color Nav

<ul class="nav1 bg-primary br-5">
	<li class="nav-item1">
		<a class="nav-link text-white active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled text-white-50" href="#">Disabled</a>
	</li>
</ul>
<ul class="nav1 bg-info mt-4 br-5">
	<li class="nav-item1">
		<a class="nav-link text-white active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled text-white-50" href="#">Disabled</a>
	</li>
</ul>
<ul class="nav1 bg-success mt-4 br-5">
	<li class="nav-item1">
		<a class="nav-link text-white active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled text-white-50" href="#">Disabled</a>
	</li>
</ul>
<ul class="nav1 bg-danger mt-4 br-5">
	<li class="nav-item1">
		<a class="nav-link text-white active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled text-white-50" href="#">Disabled</a>
	</li>
</ul>
<ul class="nav1 bg-secondary mt-4 br-5">
	<li class="nav-item1">
		<a class="nav-link text-white active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled text-white-50" href="#">Disabled</a>
	</li>
</ul>
<ul class="nav1 bg-yellow mt-4 br-5">
	<li class="nav-item1">
		<a class="nav-link text-white active" href="#">Active</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link text-white" href="#">Link</a>
	</li>
	<li class="nav-item1">
		<a class="nav-link disabled text-white-50" href="#">Disabled</a>
	</li>
</ul>
General Settings
Notifications
Show your emails
Show Task statistics
Show recent activity
System Logs
Error Reporting
Show your status to all
Keep up to date
Overview

Achieves80%

Projects60%

Earnings50%

Balance45%

Toatal Profits75%

Total Likes70%