Angular Material Nav bar: <md-nav-bar> Directive is used to create navbar in Angular Material. It uses inbuilt routing for page navigation.The events ng-href, ui-href and ng-click are supported. Here in this tutorial we are going to create Angular Material Navigation with example and demo. You can also use our online editor to edit and run the code online.
Angular Material Nav bar Example
Let us first create a simple example of nav bar –
Angular Material Nav bar Example:
<div ng-controller="MyController as ctrl" ng-cloak="">
<md-content layout-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 1</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page 2</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page 3</md-nav-item>
</md-nav-bar>
<div class="ext-content">
Content For Nav <span>{{currNavItem}}</span>
</div>
</md-content>
</div>
|
| Try It On → |
If you run the above example it will produce output something like this –