# Ionic button on right side in navbar

**URL:** <https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300>\
**Category:** ionic-v3\
**Created:** [February 20, 2016, 9:24pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300 "2016-02-20T21:24:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![polska03](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@polska03](https://forum.ionicframework.com/u/polska03)\
**Post date:** [February 20, 2016, 9:24pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/1 "2016-02-20T21:24:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![zb0t](https://avatars.discourse-cdn.com/v4/letter/z/3da27b/32.png) [@zb0t](https://forum.ionicframework.com/u/zb0t)\
**Post date:** [February 20, 2016, 9:28pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/2 "2016-02-20T21:28:06Z")

</div>

See [http://ionicframework.com/docs/v2/api/components/navbar/Navbar/](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>`

---

<div class="post-metadata">

**Author:** ![joshmorony](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/joshmorony/32/117695_2.png) [@joshmorony](https://forum.ionicframework.com/u/joshmorony)\
**Post date:** [February 20, 2016, 9:28pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/3 "2016-02-20T21:28:23Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![polska03](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@polska03](https://forum.ionicframework.com/u/polska03)\
**Post date:** [February 20, 2016, 9:44pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/4 "2016-02-20T21:44:31Z")

</div>

Thanks exactly what I was looking for!

---

<div class="post-metadata">

**Author:** ![michael\_amaral](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@michael\_amaral](https://forum.ionicframework.com/u/michael_amaral)\
**Post date:** [February 29, 2016, 9:17pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/5 "2016-02-29T21:17:56Z")

</div>

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>`

---

<div class="post-metadata">

**Author:** ![apurva3000](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/apurva3000/32/97895_2.png) [@apurva3000](https://forum.ionicframework.com/u/apurva3000)\
**Post date:** [March 5, 2016, 9:46pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/6 "2016-03-05T21:46:19Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![michael\_amaral](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@michael\_amaral](https://forum.ionicframework.com/u/michael_amaral)\
**Post date:** [March 10, 2016, 2:43pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/7 "2016-03-10T14:43:38Z")

</div>

I’ve solved my problem with this:

> ion-buttons {  
> order: 1  
> }

Try adding it to your stylesheet

---

<div class="post-metadata">

**Author:** ![rosdi](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rosdi/32/94916_2.png) [@rosdi](https://forum.ionicframework.com/u/rosdi)\
**Post date:** [April 7, 2016, 3:14am UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/8 "2016-04-07T03:14:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tollenaere](https://avatars.discourse-cdn.com/v4/letter/t/f9ae1b/32.png) [@tollenaere](https://forum.ionicframework.com/u/tollenaere)\
**Post date:** [April 8, 2016, 8:30pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/9 "2016-04-08T20:30:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![razgort](https://avatars.discourse-cdn.com/v4/letter/r/c5a1d2/32.png) [@razgort](https://forum.ionicframework.com/u/razgort)\
**Post date:** [April 21, 2016, 6:54pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/10 "2016-04-21T18:54:29Z")

</div>

+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

---

<div class="post-metadata">

**Author:** ![gu\_batista](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/gu_batista/32/114029_2.png) [@gu\_batista](https://forum.ionicframework.com/u/gu_batista)\
**Post date:** [April 30, 2016, 2:08am UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/11 "2016-04-30T02:08:54Z")

</div>

same problem here …

---

<div class="post-metadata">

**Author:** ![cyberabis](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cyberabis/32/102243_2.png) [@cyberabis](https://forum.ionicframework.com/u/cyberabis)\
**Post date:** [August 19, 2016, 6:24pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/12 "2016-08-19T18:24:01Z")

</div>

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/](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>
```

---

<div class="post-metadata">

**Author:** ![msegers](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/msegers/32/105205_2.png) [@msegers](https://forum.ionicframework.com/u/msegers)\
**Post date:** [August 24, 2016, 12:21pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/13 "2016-08-24T12:21:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ib\_romz](https://avatars.discourse-cdn.com/v4/letter/i/34f0e0/32.png) [@ib\_romz](https://forum.ionicframework.com/u/ib_romz)\
**Post date:** [September 8, 2016, 11:54am UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/14 "2016-09-08T11:54:53Z")

</div>

```
<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!

---

<div class="post-metadata">

**Author:** ![esom](https://avatars.discourse-cdn.com/v4/letter/e/e19adc/32.png) [@esom](https://forum.ionicframework.com/u/esom)\
**Post date:** [September 15, 2016, 7:58am UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/15 "2016-09-15T07:58:50Z")

</div>

thanks!! left worked perfectly

---

<div class="post-metadata">

**Author:** ![matheusabreu](https://avatars.discourse-cdn.com/v4/letter/m/8baadc/32.png) [@matheusabreu](https://forum.ionicframework.com/u/matheusabreu)\
**Post date:** [September 15, 2016, 5:51pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/16 "2016-09-15T17:51:53Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![moere](https://avatars.discourse-cdn.com/v4/letter/m/bcef8e/32.png) [@moere](https://forum.ionicframework.com/u/moere)\
**Post date:** [October 14, 2016, 1:19pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/17 "2016-10-14T13:19:08Z")

</div>

For me the buttons stay gray why is this?

---

<div class="post-metadata">

**Author:** ![aidand2129](https://avatars.discourse-cdn.com/v4/letter/a/a87d85/32.png) [@aidand2129](https://forum.ionicframework.com/u/aidand2129)\
**Post date:** [October 20, 2016, 12:57pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/18 "2016-10-20T12:57:50Z")

</div>

this aligns the button correct but menuToggle no longer works 😕

---

<div class="post-metadata">

**Author:** ![reedrichards](https://avatars.discourse-cdn.com/v4/letter/r/34f0e0/32.png) [@reedrichards](https://forum.ionicframework.com/u/reedrichards)\
**Post date:** [October 20, 2016, 4:11pm UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/19 "2016-10-20T16:11:31Z")

</div>

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>

```

---

<div class="post-metadata">

**Author:** ![aidand2129](https://avatars.discourse-cdn.com/v4/letter/a/a87d85/32.png) [@aidand2129](https://forum.ionicframework.com/u/aidand2129)\
**Post date:** [October 21, 2016, 11:05am UTC](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300/20 "2016-10-21T11:05:52Z")

</div>

This works great nice one 🙂

[Next page](https://forum.ionicframework.com/t/ionic-button-on-right-side-in-navbar/44300.md?page=2)