Bottom navigation usage

You can use the bottom navigation to easily switch between top-level views in a single tap. There are two types of bottom navigation you can use (default and shifting)

Default bottom navigation

		
<nav class="bottom-nav">
  <a href="#">
    <i class="material-icons">favorite</i>

    <div class="content">
      Favorite
    </div>
  </a>
  <a href="#" class="active">
    <i class="material-icons">cloud</i>

    <div class="content">
      Cloud
    </div>
  </a>
  <a href="#">
    <i class="material-icons">file_upload</i>

    <div class="content">
      Upload
    </div>
  </a>
</nav>
		
	

Shifting bottom navigation

		
<nav class="bottom-shifting">
  <a href="#">
    <i class="material-icons">favorite</i>

    <div class="content">
      Favorite
    </div>
  </a>
  <a href="#" class="active">
    <i class="material-icons">cloud</i>

    <div class="content">
      Cloud
    </div>
  </a>
  <a href="#">
    <i class="material-icons">file_upload</i>

    <div class="content">
      Upload
    </div>
  </a>
</nav>
		
	

Settings

Variable Options Result
$bottom-nav-background Color / variable Changes the background color
$bottom-nav-font-color Color / variable Changes the font color

Resources