diff --git a/demos/component-docs/menus/menu-events.html b/demos/component-docs/menus/menu-events.html
new file mode 100644
index 0000000000..d95d163938
--- /dev/null
+++ b/demos/component-docs/menus/menu-events.html
@@ -0,0 +1,15 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Events
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+</ion-content>
diff --git a/demos/component-docs/menus/menu-friends.html b/demos/component-docs/menus/menu-friends.html
new file mode 100644
index 0000000000..10a030378b
--- /dev/null
+++ b/demos/component-docs/menus/menu-friends.html
@@ -0,0 +1,15 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Friends
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+</ion-content>
diff --git a/demos/component-docs/menus/menu-home.html b/demos/component-docs/menus/menu-home.html
new file mode 100644
index 0000000000..4696694445
--- /dev/null
+++ b/demos/component-docs/menus/menu-home.html
@@ -0,0 +1,16 @@
+<ion-navbar *navbar>
+
+  <a menu-toggle>
+    <icon menu></icon>
+  </a>
+
+  <ion-title>
+    Menus
+  </ion-title>
+
+</ion-navbar>
+
+
+<ion-content #content padding>
+  <button block menu-toggle>Toggle Menu</button>
+</ion-content> 
diff --git a/demos/component-docs/menus/menu-places.html b/demos/component-docs/menus/menu-places.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/demos/component-docs/menus/menus.html b/demos/component-docs/menus/menus.html
index 51705e2f64..999f6b0ade 100644
--- a/demos/component-docs/menus/menus.html
+++ b/demos/component-docs/menus/menus.html
@@ -1,12 +1,24 @@
+<ion-menu #menu [content]="content">
 
-<ion-navbar *navbar class="show-navbar">
-  <ion-title>Menus</ion-title>
-</ion-navbar>
+  <ion-toolbar primary>
+    <ion-title>Menu</ion-title>
+  </ion-toolbar>
 
-<ion-content class="has-header padding">
-  TODO
-</ion-content>
+  <ion-content>
 
+    <ion-list>
 
+      <button ion-item *ng-for="#p of pages" (click)="openPage(menu, p)">
+        {{p.title}}
+      </button>
 
+      <button ion-item menu-toggle>
+        Close Menu
+      </button>
 
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="menuNav" #content [root]="rootView"></ion-nav> 
diff --git a/demos/component-docs/menus/menus.ts b/demos/component-docs/menus/menus.ts
index bf6cbfa992..0294b6b4d9 100644
--- a/demos/component-docs/menus/menus.ts
+++ b/demos/component-docs/menus/menus.ts
@@ -1,10 +1,58 @@
-import {IonicPlatform, IonicView} from 'ionic/ionic';
+import {App, IonicApp, IonicView, NavController, NavParams} from 'ionic/ionic';
+import {IonicView, Events} from 'ionic/ionic';
+import * as helpers from 'helpers';
 
 @IonicView({
-    templateUrl: 'menus/menus.html',
+  templateUrl: 'menus/menu-home.html'
+})
+class PageOne{
+  constructor(nav: NavController, events: Events) {
+      this.nav = nav;
+      this.events = events;
+  }
+}
+
+@IonicView({
+  templateUrl: 'menus/menu-friends.html'
+})
+class PageTwo{
+}
+
+@IonicView({
+  templateUrl: 'menus/menu-events.html'
+})
+class PageThree{
+}
+
+@IonicView({
+  templateUrl: 'menus/menus.html'
 })
 export class MenusPage {
-    constructor() {
 
-    }
-}
\ No newline at end of file
+  constructor(app: IonicApp, events: Events, nav: NavController) {
+    this.nav = nav;
+    this.app = app;
+    this.rootView = PageOne;
+    this.pages = [
+      { title: 'Home', component: PageOne },
+      { title: 'Friends', component: PageTwo },
+      { title: 'Events', component: PageThree }
+    ];
+
+  }
+
+  onViewWillUnload() {
+  }
+
+  openPage(menu, page) {
+    // close the menu when clicking a link from the menu
+    menu.close();
+
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    // let nav = this.app.getComponent('nav');
+    this.nav.setRoot(page.component);
+  }
+}
+
+