angular-material-npfixed/src/components/navBar/demoBasicUsage/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="AppCtrl" ng-cloak>
  <md-content class="md-padding">
    <md-nav-bar
      md-selected-nav-item="currentNavItem"
      nav-bar-aria-label="navigation links">
      <md-nav-item md-nav-click="goto('page1')" name="page1">
        Page One
      </md-nav-item>
      <md-nav-item md-nav-click="goto('page2')" name="page2">
        Page Two
      </md-nav-item>
      <md-nav-item md-nav-click="goto('page3')" name="page3">
        Page Three
      </md-nav-item>
      <!-- these require actual routing with ui-router or ng-route, so they
      won't work in the demo
      <md-nav-item md-nav-href="#page4" name="page5">Page Four</md-nav-item>
      <md-nav-item md-nav-sref="app.page5" name="page4">Page Five</md-nav-item>
      You can also add options for the <code>ui-sref-opts</code> attribute.
      <md-nav-item md-nav-sref="page6" sref-opts="{reload:true, notify:true}">
        Page Six
      </md-nav-item>
      -->
    </md-nav-bar>
    <div class="ext-content">
      External content for `<span>{{currentNavItem}}</span>`.
    </div>

    <md-checkbox ng-model="disableInkBar">Disable Ink Bar</md-checkbox>

  </md-content>
</div>