How to use md-nav-bar correctly? - angularjs

Question

I'm using angular material md-nav-bar and i have those problems.
1) I want to add it to the middle of the page.
2) I want to know how to add pages to the nav-items
I have attached an image to show how it looks now
Is there any possible way to do it?
Any help highly appreciate. Thanks,

Answer 1

Here you go - CodePen
To centre the md-nav-bar use layout
To add a md-nav-item use ng-repeat with an array and add to the array
Markup
<div ng-controller="AppCtrl" ng-app="MyApp" layout-fill layout="column" ng-cloak>
<div layout="row" layout-align="center" flex="70">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item ng-repeat="item in navItems" md-nav-click="goto('{{item.value}}')" name="{{item.value}}">{{item.label}}</md-nav-item>
</md-nav-bar>
<span>{{currentNavItem}}</span>
</md-content>
</div>
<div>
<md-button class="md-raised md-primary" ng-click="addItem()">Add Item</md-button>
</div>
</div>
JS
(function() {
'use strict';
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope, $element, $compile) {
$scope.currentNavItem = 'page1';
$scope.navItems = [
{value: "page1", label: "Page One"},
{value: "page2", label: "Page Two"},
{value: "page3", label: "Page Three"},
];
$scope.addItem = function () {
$scope.navItems.push(
{
value: "page" + ($scope.navItems.length + 1),
label: "Page" + ($scope.navItems.length + 1)
}
);
}
}
})();

Answer 2

To get the navbar elements to the center of the page you can add the <span flex></span> tags before the start of the first nav-item and the end of the last nav-item.
For your reference:
<md-nav-bar>
<span flex></span>
<md-nav-item>
</md-nav-item>
<md-nav-item>
</md-nav-item>
<span flex></span>
</md-nav-bar>