diff --git a/examples/stocks/stocks.sky b/examples/stocks/stocks.sky
index 5db7799cfb85238f8904576f9bff8d406b399b47..e90729c61f7fd1aa30f2bba51b4fb86dcbc1c4cf 100644
--- a/examples/stocks/stocks.sky
+++ b/examples/stocks/stocks.sky
@@ -3,9 +3,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
+<import src="/sky/framework/sky-drawer-header.sky" />
 <import src="/sky/framework/sky-drawer.sky" />
 <import src="/sky/framework/sky-element.sky" />
 <import src="/sky/framework/sky-icon.sky" />
+<import src="/sky/framework/sky-menu-divider.sky" />
+<import src="/sky/framework/sky-menu-item.sky" />
 <import src="/sky/framework/sky-scrollable.sky" />
 <import src="/sky/framework/sky-toolbar.sky" />
 <import src="stock.sky" as='view'/>
@@ -35,12 +38,8 @@
       color: white;
     }
     sky-icon {
-      display: flex;
-      justify-content: center;
-      align-items: center;
       padding: 8px;
       margin: 0 4px;
-      color: black;
     }
     #title {
       flex: 1;
@@ -51,7 +50,14 @@
     }
   </style>
   <sky-drawer id="drawer">
-    I am drawer
+    <sky-drawer-header>
+      Stocks
+    </sky-drawer-header>
+    <sky-menu-item icon="content/inbox">Inbox</sky-menu-item>
+    <sky-menu-item icon="content/drafts">Drafts</sky-menu-item>
+    <sky-menu-divider />
+    <sky-menu-item icon="action/settings">Settings</sky-menu-item>
+    <sky-menu-item icon="action/help">Help &amp; feedback</sky-menu-item>
   </sky-drawer>
   <sky-toolbar level="2">
     <sky-icon id="menu" type="navigation/menu_white" size="24" />
diff --git a/framework/sky-drawer-header.sky b/framework/sky-drawer-header.sky
new file mode 100644
index 0000000000000000000000000000000000000000..b680d7ed648a713d753d0b638ed5671e1a7cbf11
--- /dev/null
+++ b/framework/sky-drawer-header.sky
@@ -0,0 +1,45 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="sky-element.sky" />
+<import src="sky-icon.sky" />
+
+<sky-element attributes="icon:string">
+<template>
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 140px;
+      -webkit-user-select: none;
+      background-color: #E3ECF5;
+      border-bottom: 1px solid #D1D9E1;
+      padding-bottom: 7px;
+      margin-bottom: 8px;
+    }
+    #spacer {
+      flex: 1;
+    }
+    #label {
+      padding: 0 16px;
+      font-family: 'Roboto Medium', 'Helvetica';
+      color: #212121;
+    }
+  </style>
+  <div id="spacer" />
+  <div id="label">
+    <content />
+  </div>
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('sky-drawer-header')
+class SkyDrawerHeader extends SkyElement {
+}
+
+_init(script) => register(script, SkyDrawerHeader);
+</script>
+</sky-element>
diff --git a/framework/sky-drawer.sky b/framework/sky-drawer.sky
index 906f4f4939d33106a40712581a2f6f51c3e4bddd..a772d9874bbc511dc5be9f177a896ef2e16e27a8 100644
--- a/framework/sky-drawer.sky
+++ b/framework/sky-drawer.sky
@@ -19,7 +19,7 @@
       right: 0;
     }
     #content {
-      background-color: white;
+      background-color: #FAFAFA;
       will-change: transform;
       position: absolute;
       width: 256px;
diff --git a/framework/sky-menu-divider.sky b/framework/sky-menu-divider.sky
new file mode 100644
index 0000000000000000000000000000000000000000..d83f70ab00f4ac65625c051eeae48d3cfa3d9686
--- /dev/null
+++ b/framework/sky-menu-divider.sky
@@ -0,0 +1,26 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="sky-element.sky" />
+
+<sky-element>
+<template>
+  <style>
+    :host {
+      margin: 8px 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+  </style>
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('sky-menu-divider')
+class SkyMenuDivider extends SkyElement {
+}
+
+_init(script) => register(script, SkyMenuDivider);
+</script>
+</sky-element>
diff --git a/framework/sky-menu-item.sky b/framework/sky-menu-item.sky
new file mode 100644
index 0000000000000000000000000000000000000000..3313ada20491734e9f40e7252c1ad6a2f24e7f18
--- /dev/null
+++ b/framework/sky-menu-item.sky
@@ -0,0 +1,54 @@
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+-->
+<import src="sky-element.sky" />
+<import src="sky-icon.sky" />
+
+<sky-element attributes="icon:string">
+<template>
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      height: 48px;
+      -webkit-user-select: none;
+    }
+    sky-icon {
+      padding: 0px 16px;
+    }
+    #label {
+      font-family: 'Roboto Medium', 'Helvetica';
+      color: #212121;
+      padding: 0px 16px;
+      flex: 1;
+    }
+  </style>
+  <sky-icon size="24" />
+  <div id="label">
+    <content />
+  </div>
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('sky-menu-item')
+class SkyMenuItem extends SkyElement {
+  SkyIcon _icon;
+  Element _label;
+
+  void shadowRootReady() {
+    _icon = shadowRoot.querySelector('sky-icon');
+    _icon.type = "${icon}_grey600";
+  }
+
+  void iconChanged(String oldValue, String newValue) {
+    if (_icon != null)
+      _icon.type = "${newValue}_grey600";
+  }
+}
+
+_init(script) => register(script, SkyMenuItem);
+</script>
+</sky-element>