Basic Navigation
Basic horizontal navigation with hover effects.
<nav class="nav">
<ul class="nav-menu">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link active">About</a></li>
<li><a href="#" class="nav-link">Services</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>Breadcrumbs
Navigation aid showing the current page's location in a hierarchical structure.
<nav class="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li class="active">Current Page</li>
</ul>
</nav>Pagination
Navigation for splitting content across multiple pages.
<nav class="pagination">
<ul>
<li><a href="#" class="disabled">Previous</a></li>
<li><a href="#" class="active">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><span>...</span></li>
<li><a href="#">10</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>