Nikica Asanin Nikica Asanin - 10 days ago 5
AngularJS Question

Ionic Navigation Bar

I am trying to add pages with links in navigation bar(to be in middle). On the right I want to have nav button which on click open the side bar on the right. For now I just put the nav button but I cant figure how to put links in center of navigation bar. Code example:

<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button ng-click="myGoBack()">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent">

</ion-nav-view>
</ion-side-menu-content>

<ion-side-menu side="right">
<ion-content>
<ion-list>
<ion-item menu-close ng-click="">
Traveler
</ion-item>
<ion-item menu-close href="">
Pinko
</ion-item>
<ion-item menu-close href="">
Club
</ion-item>
<ion-item menu-close ng-click="">
My Agency
</ion-item>
<ion-item menu-close href="">
My Karma
</ion-item>
<ion-item menu-close href="">
Notification
</ion-item>
<ion-item menu-close href="">
Profile
</ion-item>
<ion-item menu-close href="">
Settings
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>


Aslo here is an image so you can see what I need:
enter image description here

Answer

I don't know how you are handling the transition to different $states, but you can try to insert the links inside the <ion-nav-title> tag in the following way:

  <ion-nav-title align='center'>
    <span><a href="">Link 1</a></span>
    <span><a href="">Link 2</a></span>
    <span><a href="">Link 3</a></span>
  </ion-nav-title>

Then if you want to move the title on the left side like in the image you have attached, you can use $ionicNavBarDelegate inside your controller with $ionicNavBarDelegate.align('left').

Then if you want to modify or the color of the links, do it via css like I did in this fiddle. I hope that my answer helps you!