How to make a horizontal navbar for angular material

Look at this example:

<div layout="row" layout-padding class="bg-dark-blue nav-dark" layout-align="space-between center"><div>    <md-button>Home</md-button>    <md-button>Item 1</md-button>    <md-button>Item 2</md-button>    <md-menu>        <md-button md-menu-origin ng-click="$mdOpenMenu()">Help</md-button>        <md-menu-content width="2">            <md-menu-item>                <md-button>Help</md-button>            </md-menu-item>            <md-menu-item>                <md-button>About</md-button>            </md-menu-item>        </md-menu-content>    </md-menu></div><div class="nav-buttons">    <md-button class="md-raised md-accent">My profile</md-button>    <md-button class="md-raised md-warn">Log Out</md-button></div>

Some of it's classes are just for colorizing the content,don't pay attention to much to them :)

As per the official documentation, the horizontal navbar creation is as easy as using a md-toolbar.

    <md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;"><h2>Sample navbar</h2></md-toolbar>`

You can add as many items you want inside the navbar and alignment of each items can be fixed using <span flex></span>.

In the span flex we can also specify values to it for specific alignments.

This is how u create a navbar in angular material:(I have used angular-material-icons here too:)

<md-content class="md-padding" style="background:#086A87">    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">      <md-nav-item md-nav-click="goto('page1')" name="page1">              <ng-md-icon icon="phone" style="fill:wheat" size="20"></ng-md-icon>Personal Information      </md-nav-item>      <md-nav-item md-nav-click="goto('page2')" name="page2">              <ng-md-icon icon="mode_edit" style="fill: wheat" size="20"></ng-md-icon>Edit      </md-nav-item>      <md-nav-item md-nav-click="goto('page3')" name="page3">              <ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail1      </md-nav-item>      <md-nav-item md-nav-click="goto('page4')" name="page4">                <ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail2            </md-nav-item>    </md-nav-bar></md-content>