diff --git a/demos/id/index.ts b/demos/id/index.ts
new file mode 100644
index 0000000000..53ec8f76d6
--- /dev/null
+++ b/demos/id/index.ts
@@ -0,0 +1,29 @@
+import {App, IonicApp, Page} from 'ionic/ionic';
+
+@Page({templateUrl: 'page1.html'})
+class Page1 {
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.menu1Active();
+  }
+  menu1Active() {
+    this.activeMenu = 'menu1';
+    this.app.getComponent('menu1').enable(true);
+    this.app.getComponent('menu2').enable(false);
+  }
+  menu2Active() {
+    this.activeMenu = 'menu2';
+    this.app.getComponent('menu1').enable(false);
+    this.app.getComponent('menu2').enable(true);
+  }
+}
+
+@App({
+  templateUrl: 'main.html'
+})
+class ApiDemoApp {
+  constructor(app: IonicApp) {
+    this.app = app;
+    this.rootView = Page1;
+  }
+}
diff --git a/demos/id/main.html b/demos/id/main.html
new file mode 100644
index 0000000000..f33edaad89
--- /dev/null
+++ b/demos/id/main.html
@@ -0,0 +1,34 @@
+<ion-menu [content]="content" id="menu1">
+
+  <ion-toolbar secondary>
+    <ion-title>Menu 1</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose="menu1" detail-none>
+        Close Menu 1
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+
+<ion-menu [content]="content" id="menu2">
+
+  <ion-toolbar danger>
+    <ion-title>Menu 2</ion-title>
+  </ion-toolbar>
+
+  <ion-content>
+    <ion-list>
+      <button ion-item menuClose="menu2" detail-none>
+        Close Menu 2
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
diff --git a/demos/id/page1.html b/demos/id/page1.html
new file mode 100644
index 0000000000..f0afa3c520
--- /dev/null
+++ b/demos/id/page1.html
@@ -0,0 +1,23 @@
+<ion-navbar *navbar>
+  <button [menuToggle]="activeMenu">
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-title>
+    Id
+  </ion-title>
+</ion-navbar>
+
+
+<ion-content padding>
+
+  <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
+
+  <p>This page has two menus with different id's, but only one is active at a time.</p>
+
+  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
+
+  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
+
+  <button block [menuToggle]="activeMenu">Toggle Menu</button>
+
+</ion-content>
diff --git a/ionic/components/app/id.ts b/ionic/components/app/id.ts
index 96273533c0..cca91f0c97 100644
--- a/ionic/components/app/id.ts
+++ b/ionic/components/app/id.ts
@@ -35,6 +35,8 @@ import {IonicApp} from './app';
  * *NOTE:* It is not recommended to use ID's across Pages, as there is often no
  * guarantee that the registered component has not been destroyed if its Page
  * has been navigated away from.
+ *
+ * @demo /docs/v2/demos/id/
  */
 @Directive({
   selector: '[id]'