<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout-title">Acme</span>
      <div class="mdl-layout-spacer"></div>
      <nav class="mdl-navigation">
				<a class="mdl-navigation__link" href="#">Home</a>
				<a class="mdl-navigation__link" href="#">About</a>
				<a class="mdl-navigation__link" href="#">Contact</a>
      </nav>
    </div>
  </header>
	<div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Acme</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="#">Products</a>
      <a class="mdl-navigation__link" href="#">Services</a>
      <a class="mdl-navigation__link" href="#">Portfolios</a>
      <a class="mdl-navigation__link" href="#">Achievements</a>
      <a class="mdl-navigation__link" href="#">Blog</a>
    </nav>
  </div>
  </div>
</div>

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons
  2. https://storage.googleapis.com/code.getmdl.io/1.0.2/material.teal-red.min.css

External JavaScript

  1. https://storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js