Dashtic logo
Projects
App Design Projects Web Design Projects App Development Projects Back-End Projects
View Projects
Message Sent.
3 hours ago
Order Placed
5 hour ago
Event Started
45 mintues ago
Your Admin lanuched
1 daya ago
View All Notifications
img
John Thomson App Developer
Profile
Settings
Messages
Sign Out

Navigation

  1. Home
  2. Elements
  3. Navigation

Basic Nav

Html 
<ul class="nav1 br-7">
	<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

Html 
<ul class="nav1 flex-column br-7">
	<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>

Color Navigation

Html 
<ul class="nav nav-pills">
	<li class="nav-item m-2">
		<a class="nav-link active px-4 py-2" href="#">Active</a>
	</li>
	<li class="nav-item dropdown m-2">
		<a class="nav-link dropdown-toggle px-4 py-2" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
		<div class="dropdown-menu">
			<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 class="dropdown-divider"></div>
			<a class="dropdown-item" href="#">Separated link</a>
		</div>
	</li>
	<li class="nav-item m-2">
		<a class="nav-link px-4 py-2" href="#">Link</a>
	</li>
	<li class="nav-item m-2">
		<a class="nav-link disabled px-4 py-2" href="#">Disabled</a>
	</li>
</ul>

Icon Navigation

Html 

<ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
	<li class="nav-item">
		<a class="nav-link border py-3 px-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 py-3 px-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 py-3 px-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 py-3 px-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 py-3 px-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

Html 
<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 fs-20"></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 fs-20"></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 fs-20"></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 fs-20"></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 fs-20"></i> </span>
		</a>
	</li>
</ul>

Navigation backgrounds

Html 
<ul class="nav1 bg-primary br-7">
	<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-7">
	<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-7">
	<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-7">
	<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-7">
	<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-7">
	<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>