Creating Angular material nav-bar with menu
<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>