Ionic button on right side in navbar

Ionic Framework ionic-v3
1

I have the following code inside of ionic2:

ion-navbar *navbar
ion-titleMy First Listi ion-title
ion-navbar>

This produces a back button on the left side and a title in the middle. How can I add a button on the right side of the navbar?

3 Likes
2

See http://ionicframework.com/docs/v2/api/components/navbar/Navbar/

<ion-navbar *navbar> <ion-title> Page Title </ion-title> <ion-buttons end> <button (click)="openModal()"> Modal </button> </ion-buttons> </ion-navbar>

12 Likes
3

You can use the <ion-buttons> directive inside of <ion-navbar> to do this. <ion-buttons start> will add a button to the left side and <ion-buttons end> will add it to the right.

Edit: ^ beat me to it!

9 Likes
4

Thanks exactly what I was looking for!

5

I know your answer can be found in docs, but I can’t explain why it isn’t working here. What am I missing?!

<ion-buttons start> <button menuToggle> <ion-icon name="md-menu"></ion-icon> </button> </ion-buttons> <ion-title> Lembretes </ion-title>

2 Likes
6

I tried your solution. It does get the button on the right hand but now it displays the left button and title text stacked over one another. Here’s my code, I don’t know what is going wrong in here:

<ion-navbar *navbar>

  <ion-buttons start>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  </ion-buttons>
  
<ion-title>title</ion-title>

  <ion-buttons end>
   <button (click)="searchToggle()">
   <ion-icon name="search"></ion-icon>
 </button>
 </ion-buttons>
  
 </ion-navbar>
7

I’ve solved my problem with this:

ion-buttons {
order: 1
}

Try adding it to your stylesheet

2 Likes
8

This won’t work if you are using the menuToggle directive (like in the tutorial)…

<ion-navbar *navbar>      
<ion-buttons end>
    <button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
</ion-buttons>
<ion-title>Hello Ionic</ion-title>

The menuToggle directive somehow messing up the alignment… if I remove menuToggle then it will work… but I will have to code the menu toggling manually.

9

Why can we not have buttons any where we want in NavBar? Like 4 button evenly spaced…

1 Like
10

+1 rosdi same issue here

<ion-navbar *navbar hideBackButton>
  <button menuToggle="leftMenu">
    <ion-icon name='menu'></ion-icon>
  </button>

  <ion-title>home</ion-title>
</ion-navbar>

this is not working for me

11

same problem here …

12

I believe specifying left instead of start is more reliable when it comes to positioning to the left.
Documentation - http://ionicframework.com/docs/v2/api/components/toolbar/Toolbar/

Example:

<ion-header>
  <ion-navbar primary>
    <ion-title>Some Page</ion-title>
    <ion-buttons left>
      <button (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
16 Likes
13

Bumping the thread, adding end does not work for me it’s added to the start. I’m pretty sure I’m using either english or dutch locale settings so not sure what’s up with that.

right works properly ofcourse

14 
<button menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>

<ion-title>Title</ion-title>

<ion-buttons end>
  <button (click)="searchToggle()">
    <ion-icon name="search"></ion-icon>
  </button>
</ion-buttons>

Works good!

1 Like
15

thanks!! left worked perfectly

1 Like
16

Yes! Try to use left as @cyberabis has mentioned.

<ion-navbar primary>
    <ion-buttons left>
        <button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>To Do</ion-title>
    <ion-buttons end>
        <button>
            <ion-icon name="add"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
3 Likes
17

For me the buttons stay gray why is this?

18

this aligns the button correct but menuToggle no longer works :confused:

19

Here an example, menuToggle left, buttons right

<ion-header>

<ion-navbar hideBackButton="true"> <!-- If you don't need back here -->

    <button ion-button menuToggle start>
        <ion-icon name="ios-menu-outline"></ion-icon>
    </button>

    <ion-title>My app</ion-title>

    <ion-buttons end>
        <button ion-button icon-only (click)="action1()">
            <ion-icon name="create"></ion-icon>
        </button>

        <button ion-button icon-only (click)="action2()">
            <ion-icon name="trash"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
5 Likes
20

This works great nice one :slight_smile: