Index

arrow_back "Navigation" Category

Navbar

A sectioned bar at the bottom or side of the screen for relevant links/controls.

Demo

Code

code scss/elements/_nav.scss
<div class="nav-container" style="height: 80vh;">
	<div class="nav nav-bar">
		<a href="#" class="nav-item active">
			<span class="nav-item-img material-icons">home</span>
			<span class="nav-item-title">Home</span>
		</a>
		<a href="#" class="nav-item">
			<span class="nav-item-img material-icons">explore</span>
			<span class="nav-item-title">Explore</span>
		</a>
		<a href="#" class="nav-item">
			<span class="nav-item-img material-icons">person</span>
			<span class="nav-item-title">Profile</span>
		</a>
	</div>
	<main class="container">
		Here is some content!
	</main>
</div>