Navigation are helpful for switching between different pages.
Simple Navigation can be used by giving the class name nav-simple-container to the nav tag. Inside there are additional classes like nav-simple-brand, nav-simple-item. You can copy the HTML code from the snippet below. The destination page URL needs to be given in a tag.
<nav class="nav-simple-container">
<div class="nav-simple-brand">
<a href="url" class="nav-simple-brand nav-simple-item">My Website</a>
</div>
<ul>
<li class="nav-simple-item">
<a href="url" class="nav-simple-item">Home</a>
</li>
<li class="nav-simple-item">
<a href="url" class="nav-simple-item">Products</a>
</li>
<li class="nav-simple-item">
<a href="url" class="nav-simple-item">Cart</a>
</li>
<li class="nav-simple-item">
<a href="url" class="nav-simple-item">Settings</a>
</li>
</ul>
</nav>
The classnames will be same as Simple Navigation, only the HTML code structure would differ.
<nav class="nav-simple-container">
<div class="nav-simple-brand">
<a href="url" class="nav-simple-brand nav-simple-item">My Website</a>
</div>
<ul>
<li class="nav-simple-item">
<a href="url" class="nav-simple-item">
<i class="fa fa-search fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="nav-simple-item">
<a href="url" class="nav-simple-item">
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
</a>
</li>
<li class="nav-simple-item badge">
<a href="url" class="nav-simple-item">
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
<span class="badge-icon badge-number badge-right badge-lg">9</span>
</a>
</li>
<li class="nav-simple-item">
<a href="url" class="nav-simple-item">
<i class="fa fa-gear fa-lg" aria-hidden="true"></i>
</a>
</li>
</ul>
</nav>