Components

<!-- Tabs -->
<ul class="nav nav-tabs">
	<li class="nav-item">
		<a class="nav-link active" href="#">Active</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">
		<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>
<!-- /Tabs -->



<!-- Pills -->
<ul class="nav nav-pills">
	<li class="nav-item">
		<a class="nav-link active" href="#">Active</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">
		<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>
<!-- /Pills -->



<!-- Justify -->
<nav class="nav nav-pills flex-column flex-sm-row">
	<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
	<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
	<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
	<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
<!-- /Justify -->
									

<!-- 

	Add to .nav:
		.justify-content-center 		centered
		.justify-content-end			right

-->
<ul class="nav">
	<li class="nav-item">
		<a class="nav-link active" href="#">Active</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">
		<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>
									

<!-- UL -->
<ul class="nav flex-column">
	<li class="nav-item">
		<a class="nav-link active" href="#">Active</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">
		<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
	</li>
</ul>


<!-- NAV -->
<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
									

<nav class="nav-deep nav-deep-light">

	<!-- mobile only -->
	<button class="clearfix btn btn-toggle btn-sm btn-block text-align-left shadow-md border rounded mb-1 d-block d-sm-none" data-target="#nav_responsive" data-toggle-container-class="d-none d-sm-block bg-white shadow-md border animate-fadein rounded p-3">
		<span class="group-icon px-2 py-2 float-start">
			<i class="fi fi-bars-2"></i>
			<i class="fi fi-close"></i>
		</span>

		<span class="h5 py-2 m-0 float-start">
			Account Menu
		</span>
	</button>

	<!-- desktop only -->
	<h5 class="pt-3 pb-3 m-0 d-none d-sm-block">
		Account Menu
	</h5>


	<!-- navigation -->
	<ul id="nav_responsive" class="nav flex-column d-none d-sm-block">

		<li class="nav-item active">
			<a class="nav-link px-0" href="#">
				<i class="fi fi-arrow-end m-0 fs--12"></i> 
				<span class="px-2 d-inline-block">
					My Orders
				</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link px-0" href="#">
				<i class="fi fi-arrow-end m-0 fs--12"></i> 
				<span class="px-2 d-inline-block">
					My Favourites
				</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link px-0" href="#">
				<i class="fi fi-arrow-end m-0 fs--12"></i> 
				<span class="px-2 d-inline-block">
					Account Settings
				</span>
			</a>
		</li>

		<li class="nav-item">
			<a class="nav-link px-0" href="#">
				<span class="group-icon">
					<i class="fi fi-arrow-end"></i>
					<i class="fi fi-arrow-down"></i>
				</span>

				<span class="px-2 d-inline-block">
					Multi level
				</span>
			</a>

			<ul class="nav flex-column px-3">
				<li class="nav-item">
					<a class="nav-link" href="#">
						Option 1
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">
						Option 2
					</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#">
						Option 3
					</a>
				</li>
			</ul>

		</li>

		<li class="nav-item">
			<a class="nav-link px-0" href="#">
				<i class="fi fi-power"></i> 
				Log Out
			</a>
		</li>

	</ul>

</nav>
									

<ul class="list-unstyled nav-default shadow-md rounded bg-white">

	<li>
		<a href="#!">
			<i class="fi fi-shield-ok"></i>
			<span>Lorem ipsum</span>
		</a>
	</li>

	<li>
		<a href="#!">
			<i class="fi fi-mollecules"></i>
			<span>Lorem ipsum</span>
		</a>
	</li>

	<li>
		<a href="#!">
			<i class="fi fi-graph"></i>
			<span>Lorem ipsum</span>
		</a>
	</li>

	<li>
		<a href="#!">
			<i class="fi fi-round-lightning"></i>
			<span>Lorem ipsum</span>
		</a>
	</li>

</ul>