From 8b693ce836df6ce6c249a07013afaadca219dedd Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Mon, 7 Dec 2015 11:18:00 -0600
Subject: [PATCH] toolbar button updates

---
 .../buttons/components/components.html        |   8 +-
 .../menus/basic/menu-events.html              |   4 +-
 .../menus/basic/menu-friends.html             |   4 +-
 .../component-docs/menus/basic/menu-home.html |   6 +-
 .../menus/basic/menu-places.html              |   4 +-
 .../modals/basic/modal-content.html           |   4 +-
 demos/material/index.ts                       |   8 +-
 demos/menu/page1.html                         |   4 +-
 demos/menu/page2.html                         |   4 +-
 demos/modal/index.ts                          |   2 +-
 demos/native/pages/battery.ts                 |   4 +-
 demos/native/pages/camera.ts                  |   4 +-
 demos/native/pages/contacts.ts                |   4 +-
 demos/native/pages/device-motion.ts           |   4 +-
 demos/native/pages/device-orientation.ts      |   4 +-
 demos/native/pages/device.ts                  |   4 +-
 demos/native/pages/dialogs.ts                 |   4 +-
 demos/native/pages/geolocation.ts             |   4 +-
 demos/native/pages/statusbar.ts               |   4 +-
 demos/native/pages/vibration.ts               |   4 +-
 .../item/test/groups/session-list.html        |   4 +-
 ionic/components/item/test/sliding/main.html  |   4 +-
 ionic/components/menu/test/basic/page1.html   |  16 +-
 ionic/components/menu/test/basic/page2.html   |   4 +-
 ionic/components/menu/test/basic/page3.html   |   4 +-
 ionic/components/menu/test/overlay/page1.html |   4 +-
 ionic/components/menu/test/push/page1.html    |   4 +-
 ionic/components/menu/test/reveal/page1.html  |   4 +-
 ionic/components/modal/test/basic/index.ts    |   4 +-
 ionic/components/nav/test/basic/index.ts      |   8 +-
 ionic/components/nav/test/nested/index.ts     |   8 +-
 ionic/components/nav/test/routing/view1.html  |   4 +-
 ionic/components/nav/test/routing/view2.html  |   2 +-
 ionic/components/navbar/navbar.ts             |   6 +-
 ionic/components/segment/test/basic/main.html |   4 +-
 ionic/components/slides/test/intro/main.html  |   8 +-
 ionic/components/tabs/test/basic/index.ts     |   4 +-
 ionic/components/tabs/test/ghost/index.ts     |   8 +-
 .../text-input/test/input-focus/main.html     |   4 +-
 ionic/components/toolbar/modes/ios.scss       | 140 ++++++++-------
 ionic/components/toolbar/modes/md.scss        | 164 ++++++++++--------
 .../toolbar/test/scenarios/main.html          |  92 +++++-----
 ionic/components/toolbar/toolbar-button.scss  |   7 -
 ionic/components/toolbar/toolbar.scss         |  34 +---
 ionic/components/toolbar/toolbar.ts           |  10 +-
 45 files changed, 329 insertions(+), 310 deletions(-)

diff --git a/demos/component-docs/buttons/components/components.html b/demos/component-docs/buttons/components/components.html
index a3b18c2d40..bfd9d6ad00 100644
--- a/demos/component-docs/buttons/components/components.html
+++ b/demos/component-docs/buttons/components/components.html
@@ -2,16 +2,16 @@
 
   <ion-title>Buttons</ion-title>
 
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon contact></icon>
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
   <button>
     <icon search></icon>
   </button>
-  </ion-nav-items>
+  </ion-buttons>
 
 </ion-navbar>
 
diff --git a/demos/component-docs/menus/basic/menu-events.html b/demos/component-docs/menus/basic/menu-events.html
index 3d34a652fb..bbd9b72848 100644
--- a/demos/component-docs/menus/basic/menu-events.html
+++ b/demos/component-docs/menus/basic/menu-events.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Events
diff --git a/demos/component-docs/menus/basic/menu-friends.html b/demos/component-docs/menus/basic/menu-friends.html
index 44857cbb9f..a307b06157 100644
--- a/demos/component-docs/menus/basic/menu-friends.html
+++ b/demos/component-docs/menus/basic/menu-friends.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Friends
diff --git a/demos/component-docs/menus/basic/menu-home.html b/demos/component-docs/menus/basic/menu-home.html
index bd7028ff64..411e497cce 100644
--- a/demos/component-docs/menus/basic/menu-home.html
+++ b/demos/component-docs/menus/basic/menu-home.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menus
@@ -13,4 +13,4 @@
 
 <ion-content padding>
   <button block menu-toggle="leftMenu">Toggle Menu</button>
-</ion-content> 
+</ion-content>
diff --git a/demos/component-docs/menus/basic/menu-places.html b/demos/component-docs/menus/basic/menu-places.html
index 3b8609770b..bbff9b536a 100644
--- a/demos/component-docs/menus/basic/menu-places.html
+++ b/demos/component-docs/menus/basic/menu-places.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Places
diff --git a/demos/component-docs/modals/basic/modal-content.html b/demos/component-docs/modals/basic/modal-content.html
index d6e7fba833..18042836af 100644
--- a/demos/component-docs/modals/basic/modal-content.html
+++ b/demos/component-docs/modals/basic/modal-content.html
@@ -2,14 +2,14 @@
   <ion-title>
     Description
   </ion-title>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button (click)="close()" *ng-if=" currentPlatform === 'ios' ">
       Cancel
     </button>
     <button (click)="close()" *ng-if=" currentPlatform === 'android' ">
       <icon close></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
diff --git a/demos/material/index.ts b/demos/material/index.ts
index c52e290243..4d5bd6dcf1 100644
--- a/demos/material/index.ts
+++ b/demos/material/index.ts
@@ -5,13 +5,13 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
-    '<a menu-toggle="menu">' +
+    '<button menu-toggle="menu">' +
       '<icon menu></icon>' +
-    '</a>' +
-    '<ion-nav-items secondary>' +
+    '</button>' +
+    '<ion-buttons end>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
       '<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
-    '</ion-nav-items>' +
+    '</ion-buttons>' +
   '</ion-navbar>' +
   '<ion-content>' +
     `
diff --git a/demos/menu/page1.html b/demos/menu/page1.html
index 8ce7edcdb7..87745111f9 100644
--- a/demos/menu/page1.html
+++ b/demos/menu/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
diff --git a/demos/menu/page2.html b/demos/menu/page2.html
index af718dbb18..7bdf1645ee 100644
--- a/demos/menu/page2.html
+++ b/demos/menu/page2.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
diff --git a/demos/modal/index.ts b/demos/modal/index.ts
index 9603703f0e..cf5ab019b2 100644
--- a/demos/modal/index.ts
+++ b/demos/modal/index.ts
@@ -73,7 +73,7 @@ export class ContactModal {
 
 @Page({
   template: `
-    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
+    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-buttons start><button (click)="closeModal()">Close</button></ion-buttons></ion-navbar>
     <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>
diff --git a/demos/native/pages/battery.ts b/demos/native/pages/battery.ts
index d11047e576..661d946545 100644
--- a/demos/native/pages/battery.ts
+++ b/demos/native/pages/battery.ts
@@ -4,9 +4,9 @@ import {IonicView, Battery} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Battery</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/camera.ts b/demos/native/pages/camera.ts
index 1365125cff..63069de8c9 100644
--- a/demos/native/pages/camera.ts
+++ b/demos/native/pages/camera.ts
@@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Camera</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/contacts.ts b/demos/native/pages/contacts.ts
index aac736de0a..0b95be91ca 100644
--- a/demos/native/pages/contacts.ts
+++ b/demos/native/pages/contacts.ts
@@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/device-motion.ts b/demos/native/pages/device-motion.ts
index 92e2824f33..f55052e0fa 100644
--- a/demos/native/pages/device-motion.ts
+++ b/demos/native/pages/device-motion.ts
@@ -4,9 +4,9 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/device-orientation.ts b/demos/native/pages/device-orientation.ts
index 95a4e8a2d4..eec2c3f293 100644
--- a/demos/native/pages/device-orientation.ts
+++ b/demos/native/pages/device-orientation.ts
@@ -4,9 +4,9 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device Orientation</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/device.ts b/demos/native/pages/device.ts
index fd37281996..f4976ef4c9 100644
--- a/demos/native/pages/device.ts
+++ b/demos/native/pages/device.ts
@@ -4,9 +4,9 @@ import {IonicView, Device} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/dialogs.ts b/demos/native/pages/dialogs.ts
index 12fd20d141..f5c0abb675 100644
--- a/demos/native/pages/dialogs.ts
+++ b/demos/native/pages/dialogs.ts
@@ -4,9 +4,9 @@ import {IonicView, Dialogs} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Dialogs</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/geolocation.ts b/demos/native/pages/geolocation.ts
index b4e6af7052..2325076b6e 100644
--- a/demos/native/pages/geolocation.ts
+++ b/demos/native/pages/geolocation.ts
@@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Geolocation</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/statusbar.ts b/demos/native/pages/statusbar.ts
index 50dc6d6864..7595575687 100644
--- a/demos/native/pages/statusbar.ts
+++ b/demos/native/pages/statusbar.ts
@@ -5,9 +5,9 @@ import {StatusBar} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>StatusBar</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/demos/native/pages/vibration.ts b/demos/native/pages/vibration.ts
index 92d72d3c6c..f443b917d9 100644
--- a/demos/native/pages/vibration.ts
+++ b/demos/native/pages/vibration.ts
@@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content padding>
diff --git a/ionic/components/item/test/groups/session-list.html b/ionic/components/item/test/groups/session-list.html
index 90113a9cbe..f32ba3a922 100644
--- a/ionic/components/item/test/groups/session-list.html
+++ b/ionic/components/item/test/groups/session-list.html
@@ -1,8 +1,8 @@
 <ion-navbar *navbar>
   <ion-title>Item Groups</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">Reload</button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-navbar>
 
 <ion-content class="outer-content">
diff --git a/ionic/components/item/test/sliding/main.html b/ionic/components/item/test/sliding/main.html
index f054413350..481cfd48e6 100644
--- a/ionic/components/item/test/sliding/main.html
+++ b/ionic/components/item/test/sliding/main.html
@@ -1,8 +1,8 @@
 <ion-toolbar>
   <ion-title>Sliding Items</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">Reload</button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 <ion-content>
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index c00cafabf4..ed3744ca64 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -1,29 +1,29 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
   </ion-title>
 
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon football></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon baseball></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 
-  <a menu-toggle="rightMenu" secondary>
+  <button menu-toggle="rightMenu" right>
     <icon menu></icon>
-  </a>
+  </button>
 
 </ion-navbar>
 
diff --git a/ionic/components/menu/test/basic/page2.html b/ionic/components/menu/test/basic/page2.html
index 098f3e147b..66415e066b 100644
--- a/ionic/components/menu/test/basic/page2.html
+++ b/ionic/components/menu/test/basic/page2.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
diff --git a/ionic/components/menu/test/basic/page3.html b/ionic/components/menu/test/basic/page3.html
index 4b67473c14..cfcda473c2 100644
--- a/ionic/components/menu/test/basic/page3.html
+++ b/ionic/components/menu/test/basic/page3.html
@@ -5,9 +5,9 @@
     Menu
   </ion-title>
 
-  <a menu-toggle="rightMenu" secondary>
+  <button menu-toggle="rightMenu" right>
     <icon menu></icon>
-  </a>
+  </button>
 
 </ion-navbar>
 
diff --git a/ionic/components/menu/test/overlay/page1.html b/ionic/components/menu/test/overlay/page1.html
index 19b06004ae..99eb7dacf7 100644
--- a/ionic/components/menu/test/overlay/page1.html
+++ b/ionic/components/menu/test/overlay/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Overlay Menu
diff --git a/ionic/components/menu/test/push/page1.html b/ionic/components/menu/test/push/page1.html
index fb8ffbadd8..cbac02c561 100644
--- a/ionic/components/menu/test/push/page1.html
+++ b/ionic/components/menu/test/push/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Push Menu
diff --git a/ionic/components/menu/test/reveal/page1.html b/ionic/components/menu/test/reveal/page1.html
index 6e4f46b80a..fb6bab465a 100644
--- a/ionic/components/menu/test/reveal/page1.html
+++ b/ionic/components/menu/test/reveal/page1.html
@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Reveal Menu
diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts
index f5efcbf1f5..820832e1eb 100644
--- a/ionic/components/modal/test/basic/index.ts
+++ b/ionic/components/modal/test/basic/index.ts
@@ -141,9 +141,9 @@ class ContactUs {
   template: `
     <ion-navbar *navbar>
       <ion-title>First Page Header</ion-title>
-      <ion-nav-items primary>
+      <ion-buttons start>
         <button class="e2eCloseMenu" (click)="closeModal()">Close</button>
-      </ion-nav-items>
+      </ion-buttons>
     </ion-navbar>
     <ion-content padding>
       <p>
diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts
index de9ed10bc1..4352bc6bc0 100644
--- a/ionic/components/nav/test/basic/index.ts
+++ b/ionic/components/nav/test/basic/index.ts
@@ -16,12 +16,12 @@ class MyCmpTest{}
   template: `
     <ion-navbar *navbar>
       <ion-title>{{title}}</ion-title>
-      <ion-nav-items primary>
+      <ion-buttons start>
         <button><icon star></icon></button>
-      </ion-nav-items>
-      <ion-nav-items secondary>
+      </ion-buttons>
+      <ion-buttons end>
         <button>S1</button>
-      </ion-nav-items>
+      </ion-buttons>
     </ion-navbar>
     <ion-content>
       <ion-list>
diff --git a/ionic/components/nav/test/nested/index.ts b/ionic/components/nav/test/nested/index.ts
index 59de5949d7..935897f4b2 100644
--- a/ionic/components/nav/test/nested/index.ts
+++ b/ionic/components/nav/test/nested/index.ts
@@ -75,9 +75,9 @@ export class Account {
 @Page({
   template: `
     <ion-navbar *navbar primary>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Account Dashboard</ion-title>
     </ion-navbar>
     <ion-content padding>
@@ -106,9 +106,9 @@ export class Dashboard {
 @Page({
   template: `
     <ion-navbar *navbar danger>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Account Profile</ion-title>
     </ion-navbar>
     <ion-content padding>
diff --git a/ionic/components/nav/test/routing/view1.html b/ionic/components/nav/test/routing/view1.html
index b48af356a4..39789c8de6 100644
--- a/ionic/components/nav/test/routing/view1.html
+++ b/ionic/components/nav/test/routing/view1.html
@@ -1,8 +1,8 @@
 
 <ion-navbar *navbar>
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
   <ion-title>First View</ion-title>
 </ion-navbar>
 
diff --git a/ionic/components/nav/test/routing/view2.html b/ionic/components/nav/test/routing/view2.html
index 3cd2b1d7e5..98ae4bf8f5 100644
--- a/ionic/components/nav/test/routing/view2.html
+++ b/ionic/components/nav/test/routing/view2.html
@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar primary>
   <ion-title>Second View</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon help></icon>
     </button>
diff --git a/ionic/components/navbar/navbar.ts b/ionic/components/navbar/navbar.ts
index 9cabaaee46..7145a01aa0 100644
--- a/ionic/components/navbar/navbar.ts
+++ b/ionic/components/navbar/navbar.ts
@@ -71,9 +71,9 @@ class ToolbarBackground {
         '<span class="back-default">{{bbText}}</span>' +
       '</span>' +
     '</button>' +
-    '<ng-content select="[menu-toggle]"></ng-content>' +
-    '<ng-content select="ion-nav-items[primary]"></ng-content>' +
-    '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
+    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
+    '<ng-content select="ion-buttons[start]"></ng-content>' +
+    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
     '</div>',
diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html
index aba6b1d080..f923dfeaab 100644
--- a/ionic/components/segment/test/basic/main.html
+++ b/ionic/components/segment/test/basic/main.html
@@ -10,11 +10,11 @@
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-segment secondary>
     <ion-segment-button>
       Something
diff --git a/ionic/components/slides/test/intro/main.html b/ionic/components/slides/test/intro/main.html
index 15b0f2b262..00caad1bb2 100644
--- a/ionic/components/slides/test/intro/main.html
+++ b/ionic/components/slides/test/intro/main.html
@@ -30,16 +30,16 @@
 }
 </style>
 <ion-navbar *navbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       Skip
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button (click)="next()">
       Next
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Grid Icons</ion-title>
 </ion-navbar>
 <ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
index c8f261c2d7..5a1209855c 100644
--- a/ionic/components/tabs/test/basic/index.ts
+++ b/ionic/components/tabs/test/basic/index.ts
@@ -71,9 +71,9 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
     <ion-content padding>
diff --git a/ionic/components/tabs/test/ghost/index.ts b/ionic/components/tabs/test/ghost/index.ts
index 86588d5051..23f2882b63 100644
--- a/ionic/components/tabs/test/ghost/index.ts
+++ b/ionic/components/tabs/test/ghost/index.ts
@@ -46,9 +46,9 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
     <ion-content padding>
@@ -68,9 +68,9 @@ class Tab3 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Quesarito</ion-title>
     </ion-navbar>
     <ion-content padding>
diff --git a/ionic/components/text-input/test/input-focus/main.html b/ionic/components/text-input/test/input-focus/main.html
index 1c82634a14..6098a24aee 100644
--- a/ionic/components/text-input/test/input-focus/main.html
+++ b/ionic/components/text-input/test/input-focus/main.html
@@ -1,11 +1,11 @@
 
 <ion-toolbar>
   <ion-title>Inset Focus</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">
       Reload
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 1d3de7f228..a029076d5d 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -6,18 +6,20 @@
 // --------------------------------------------------
 
 $toolbar-order-ios: (
-  back-button: 10,
-  menu-toggle-primary: 20,
-  primary: 30,
-  secondary: 50,
-  menu-toggle-secondary: 60,
+  back-button: 0,
+  menu-toggle-start: 1,
+  buttons-left: 2,
+  buttons-start: 3,
+  content: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
 );
 
 $toolbar-ios-padding:                       4px !default;
 $toolbar-ios-height:                        4.4rem !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
-
 $navbar-ios-height:                         $toolbar-ios-height !default;
 
 
@@ -30,9 +32,73 @@ ion-navbar-section {
   min-height: $navbar-ios-height;
 }
 
+
+// iOS Toolbar Background
+// --------------------------------------------------
+
+.toolbar-background {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: $toolbar-ios-border-color;
+  background-color: $toolbar-ios-background-color;
+}
+
+&.hairlines .toolbar-background {
+  border-bottom-width: 0.55px;
+}
+
+
+// iOS Toolbar Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 1;
+  order: map-get($toolbar-order-ios, content);
+}
+
+.toolbar-title {
+  font-size: $toolbar-ios-title-font-size;
+  font-weight: 500;
+  text-align: center;
+  pointer-events: auto;
+  color: $toolbar-ios-text-color;
+}
+
+ion-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0px 90px 1px 90px;
+  pointer-events: none;
+  transform: translateZ(0px);
+}
+
+
 // iOS Toolbar Buttons
 // --------------------------------------------------
 
+ion-buttons {
+  flex: 1;
+  order: map-get($toolbar-order-ios, buttons-start);
+  transform: translateZ(0px);
+}
+
+ion-buttons[left] {
+  order: map-get($toolbar-order-ios, buttons-left);
+}
+
+ion-buttons[end] {
+  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-end);
+}
+
+ion-buttons[right] {
+  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-right);
+}
+
 .bar-button {
   margin-top: 0;
   margin-bottom: 0;
@@ -73,14 +139,14 @@ ion-navbar-section {
 }
 
 
-// iOS Back Button
+// iOS Toolbar  Back Button
 // --------------------------------------------------
 
 .back-button {
   margin: 0;
   min-height: 3.2rem;
   line-height: 1;
-  order: map-get($toolbar-order-ios, 'back-button');
+  order: map-get($toolbar-order-ios, back-button);
   overflow: visible;
   transform: translateZ(0px);
 }
@@ -93,16 +159,17 @@ ion-navbar-section {
 }
 
 
-// iOS Menu Toggle
+// iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
 [menu-toggle] {
-  order: map-get($toolbar-order-ios, menu-toggle-primary);
+  order: map-get($toolbar-order-ios, menu-toggle-start);
   cursor: pointer;
 }
 
-[menu-toggle][secondary] {
-  order: map-get($toolbar-order-ios, menu-toggle-secondary);
+[menu-toggle][end],
+[menu-toggle][right] {
+  order: map-get($toolbar-order-ios, menu-toggle-end);
 }
 
 ion-segment-button[button] {
@@ -112,55 +179,6 @@ ion-segment-button[button] {
 }
 
 
-// iOS Toolbar Background
-// --------------------------------------------------
-
-.toolbar-background {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-color: $toolbar-ios-border-color;
-  background-color: $toolbar-ios-background-color;
-}
-
-&.hairlines .toolbar-background {
-  border-bottom-width: 0.55px;
-}
-
-
-// iOS Toolbar Content
-// --------------------------------------------------
-
-ion-title {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0px 90px 1px 90px;
-  pointer-events: none;
-  transform: translateZ(0px);
-}
-
-.toolbar-title {
-  font-size: $toolbar-ios-title-font-size;
-  font-weight: 500;
-  text-align: center;
-  pointer-events: auto;
-  color: $toolbar-ios-text-color;
-}
-
-ion-nav-items {
-  flex: 1;
-  order: map-get($toolbar-order-ios, primary);
-  transform: translateZ(0px);
-}
-
-ion-nav-items[secondary] {
-  text-align: right;
-  order: map-get($toolbar-order-ios, secondary);
-}
-
-
 // iOS Toolbar Color Generation
 // --------------------------------------------------
 
diff --git a/ionic/components/toolbar/modes/md.scss b/ionic/components/toolbar/modes/md.scss
index 7447936f8b..9c669dd4ed 100644
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -5,41 +5,111 @@
 // Material Design Toolbar
 // --------------------------------------------------
 
-$toolbar-md-padding:                 4px !default;
-$toolbar-md-height:                  5.6rem !default;
-$toolbar-md-title-font-size:         2rem !default;
-$toolbar-md-button-font-size:        1.4rem !default;
+$toolbar-order-md: (
+  back-button: 0,
+  menu-toggle-start: 1,
+  buttons-left: 2,
+  content: 3,
+  buttons-start: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
+);
+
+$toolbar-md-padding:                     4px !default;
+$toolbar-md-height:                      5.6rem !default;
+$toolbar-md-title-font-size:             2rem !default;
+$toolbar-md-button-font-size:            1.4rem !default;
+$navbar-md-height:                       $toolbar-md-height !default;
 
 
 .toolbar {
   padding: $toolbar-md-padding;
   min-height: $toolbar-md-height;
+}
 
-  button,
-  [button],
-  button.activated,
-  [button].activated {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding: 0 5px;
-    min-height: 32px;
-    box-shadow: none;
-    overflow: visible;
-    color: $toolbar-md-active-color;
-  }
+ion-navbar-section {
+  min-height: $navbar-md-height;
+}
 
-  button.icon-only,
-  [button].icon-only {
-    padding-right: 0;
-    padding-left: 0;
-  }
 
-  button icon,
-  [button] icon {
-    padding: 0;
-    min-width: 28px;
-  }
+// Material Design Toolbar Background
+// --------------------------------------------------
 
+.toolbar-background {
+  border-color: $toolbar-md-border-color;
+  background-color: $toolbar-md-background-color;
+}
+
+
+// Material Design Toolbar Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 1;
+  order: map-get($toolbar-order-md, content);
+}
+
+.toolbar-title {
+  color: $toolbar-md-text-color;
+}
+
+ion-title {
+  padding: 0 12px;
+  font-size: $toolbar-md-title-font-size;
+  font-weight: 500;
+}
+
+
+// Material Design Toolbar Buttons
+// --------------------------------------------------
+
+ion-buttons {
+  flex: 1;
+  order: map-get($toolbar-order-md, buttons-start);
+  transform: translateZ(0px);
+}
+
+ion-buttons[left] {
+  order: map-get($toolbar-order-md, buttons-left);
+}
+
+ion-buttons[left] .bar-button:first-child {
+  margin-left: 0;
+}
+
+ion-buttons[end] {
+  text-align: right;
+  order: map-get($toolbar-order-md, buttons-end);
+}
+
+ion-buttons[right] {
+  text-align: right;
+  order: map-get($toolbar-order-md, buttons-right);
+}
+
+
+// Material Design Toolbar Back Button
+// --------------------------------------------------
+
+.back-button {
+  margin: 0 0 0 12px;
+  box-shadow: none;
+}
+
+.back-button-icon {
+  margin: 0;
+  min-width: 44px;
+  font-size: 2.4rem;
+  font-weight: normal;
+  text-align: left;
+}
+
+
+// Material Design Toolbar Menu Toggle
+// --------------------------------------------------
+
+.toolbar {
   [menu-toggle],
   [menu-toggle].activated {
     padding: 0 2px;
@@ -55,34 +125,6 @@ $toolbar-md-button-font-size:        1.4rem !default;
     margin: 0 2px;
     min-width: 28px;
   }
-
-}
-
-.toolbar button:hover:not(.disable-hover),
-.toolbar [button]:hover:not(.disable-hover),
-.toolbar button.activated,
-.toolbar [button].activated {
-  color: $toolbar-md-active-color;
-  background-color: transparent;
-}
-
-.toolbar-background {
-  border-color: $toolbar-md-border-color;
-  background-color: $toolbar-md-background-color;
-}
-
-ion-title {
-  padding: 0 12px;
-  font-size: $toolbar-md-title-font-size;
-  font-weight: 500;
-}
-
-.toolbar-title {
-  color: $toolbar-md-text-color;
-}
-
-ion-nav-items[primary] button:first-child {
-  margin-left: 0;
 }
 
 
@@ -96,20 +138,6 @@ ion-navbar-section {
   min-height: $navbar-md-height;
 }
 
-.back-button {
-  margin: 0 0 0 12px;
-  box-shadow: none;
-}
-
-.back-button-icon {
-  margin: 0;
-  min-width: 44px;
-  font-size: 2.4rem;
-  font-weight: normal;
-  text-align: left;
-}
-
-
 
 // Material Design Toolbar Color Generation
 // --------------------------------------------------
diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index 2a1a98c698..c93a93d026 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -5,43 +5,43 @@
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon ios=contact></icon>
     </button>
     <button>
       <icon search></icon>
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button>
       <icon more></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Defaults</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button class="activated">
       <icon ios="contact"></icon>
     </button>
     <button class="activated">
       <icon search></icon>
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button class="activated">
       <icon more></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Defaults.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button clear>
       <icon contact></icon>
     </button>
@@ -49,19 +49,19 @@
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Clear</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button clear secondary>
       Help
       <icon help-circle></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button clear class="activated">
       <icon contact></icon>
     </button>
@@ -69,19 +69,19 @@
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Clear</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button clear secondary class="activated">
       Help
       <icon help-circle></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button outline>
       <icon contact></icon>
     </button>
@@ -89,18 +89,18 @@
       <icon star></icon>
       Star
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary outline>
       <icon contact></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Outline</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button outline class="activated">
       <icon contact></icon>
     </button>
@@ -108,94 +108,94 @@
       <icon star></icon>
       Star
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary outline class="activated">
       <icon contact></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Outline.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       Btn
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary>
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>ColorAttr</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button class="activated">
       Btn
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button secondary class="activated">
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>ColorAttr.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
-  <ion-nav-items secondary>
+  </ion-buttons>
+  <ion-buttons end>
     <button>
       Edit
       <icon create></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Icon/Color Attr</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
-  <ion-nav-items primary>
+  </button>
+  <ion-buttons start>
     <button>
       <icon star></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Left side menu toggle</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-<ion-nav-items secondary>
+<ion-buttons end>
   <button #button1 (click)="buttonClick(button1)">
     <icon star></icon>
   </button>
-</ion-nav-items>
+</ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
-  <a menu-toggle secondary>
+  <button menu-toggle right>
     <icon menu></icon>
-  </a>
+  </button>
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button #button2 (click)="buttonClick(button2)">
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-segment secondary>
     <ion-segment-button>
       Something
diff --git a/ionic/components/toolbar/toolbar-button.scss b/ionic/components/toolbar/toolbar-button.scss
index 133e55524a..3ba63610c8 100644
--- a/ionic/components/toolbar/toolbar-button.scss
+++ b/ionic/components/toolbar/toolbar-button.scss
@@ -39,14 +39,9 @@
   margin: 0 6px;
   padding: 0;
   min-width: 36px;
-  order: map-get($toolbar-order, menu-toggle-primary);
   box-shadow: none;
 }
 
-.toolbar [menu-toggle][secondary] {
-  order: map-get($toolbar-order, menu-toggle-secondary);
-}
-
 .toolbar [menu-toggle] icon {
   padding: 0 6px;
   font-size: 2.8rem;
@@ -57,8 +52,6 @@
 // --------------------------------------------------
 
 .back-button {
-  order: map-get($toolbar-order, backButton);
-
   display: none;
   &.show-back-button {
     display: flex;
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index a504be4100..8b54064f2d 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -3,15 +3,6 @@
 // Toolbar
 // --------------------------------------------------
 
-$toolbar-order: (
-  backButton: 10,
-  menu-toggle-left: 20,
-  content: 30,
-  left: 40,
-  right: 50,
-  menu-toggle-right: 60,
-);
-
 
 .toolbar {
   position: relative;
@@ -40,12 +31,6 @@ $toolbar-order: (
   pointer-events: none;
 }
 
-.toolbar-content {
-  display: block;
-  flex: 1;
-  order: map-get($toolbar-order, content);
-}
-
 .toolbar[position=bottom] {
   order: $flex-order-toolbar-bottom;
 }
@@ -64,27 +49,22 @@ ion-title {
   overflow: hidden;
 }
 
-ion-nav-items {
+ion-buttons {
   display: block;
   margin: 0 0.2rem;
   pointer-events: none;
-  order: map-get($toolbar-order, left);
 }
 
-ion-nav-items[secondary] {
-  order: map-get($toolbar-order, right);
-}
-
-ion-nav-items button,
-ion-nav-items a,
-ion-nav-items input,
-ion-nav-items textarea,
-ion-nav-items div {
+ion-buttons button,
+ion-buttons a,
+ion-buttons input,
+ion-buttons textarea,
+ion-buttons div {
   pointer-events: auto;
 }
 
 // TODO this is a temp hack to fix segment overlapping ion-nav-item
-ion-nav-items,
+ion-buttons,
 [menu-toggle] {
   z-index: 99;
 }
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index c779731271..b0d1e07b5a 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -44,7 +44,7 @@ export class ToolbarBase extends Ion  {
 
   /**
    * @private
-   * A toolbar items include the left and right side `ion-nav-items`,
+   * A toolbar items include the left and right side `ion-buttons`,
    * and every `menu-toggle`. It does not include the `ion-title`.
    * @returns {TODO} Array of this toolbar's item ElementRefs.
    */
@@ -79,9 +79,9 @@ export class ToolbarBase extends Ion  {
   selector: 'ion-toolbar',
   template:
     '<div class="toolbar-background"></div>' +
-    '<ng-content select="[menu-toggle]"></ng-content>' +
-    '<ng-content select="ion-nav-items[primary]"></ng-content>' +
-    '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
+    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
+    '<ng-content select="ion-buttons[start]"></ng-content>' +
+    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
     '</div>',
@@ -149,7 +149,7 @@ export class ToolbarTitle extends Ion {
  * @private
  */
 @Directive({
-  selector: 'ion-nav-items,[menu-toggle]'
+  selector: 'ion-buttons,[menu-toggle]'
 })
 export class ToolbarItem extends Ion {
   constructor(