title: Creating Angular material nav-bar with menu
body: <p>I am trying to build a website in angularjs with google material design. My codepen url is <a href="http://codepen.io/milindsaraswala/pen/yJaYpe" rel="nofollow noreferrer">http://codepen.io/milindsaraswala/pen/yJaYpe</a></p>
  
  <p>Some Code</p>
  
  <pre><code>&lt;md-content class="navBar"&gt;
    &lt;!--class="md-padding"--&gt;
    &lt;md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"&gt;
      &lt;md-nav-item md-nav-click="goto('page1')" name="page1"&gt;Item-1&lt;/md-nav-item&gt;
      &lt;md-nav-item md-nav-click="goto('page2')" name="page2"&gt;Item-2&lt;/md-nav-item&gt;
      &lt;md-nav-item md-nav-click="goto('page3')" name="page3"&gt;Item-3&lt;/md-nav-item&gt;
      &lt;md-nav-item md-nav-click="goto('page4')" name="page4"&gt;Item-4&lt;/md-nav-item&gt;
      &lt;md-nav-item md-nav-click="goto('page5')" name="page5"&gt;Item-5&lt;/md-nav-item&gt;
      &lt;!-- these require actual routing with ui-router or ng-route, so they won't work in the demo
      &lt;md-nav-item md-nav-sref="app.page4" name="page4"&gt;Page Four&lt;/md-nav-item&gt;
      &lt;md-nav-item md-nav-href="#page5" name="page5"&gt;Page Five&lt;/md-nav-item&gt;--&gt;
    &lt;/md-nav-bar&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p>I was looking to making a navigation menu for the website, something like this
  <a href="https://i.stack.imgur.com/J5Cof.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J5Cof.png" alt="enter image description here"></a></p>
  
  <p>If somebody can help me, I will be very appreciative. I've been trying for the past 3-4 days but haven't been able to make it. </p>