support links

demo.html

@@ -29,7 +29,9 @@
   <core-menu>
     <paper-item icon="refresh" label="Item 1"></paper-item>
     <paper-item label="Item 2"></paper-item>
-    <paper-item label="Item 3"></paper-item>
+    <paper-item label="Item with a link">
+      <a href="http://www.polymer-project.org" xtarget="_self"></a>
+    </paper-item>
   </core-menu>
 </body>
 </html>

paper-item.css

@@ -14,8 +14,17 @@ html /deep/ paper-item::shadow #ripple {
   left: 0;
   bottom: 0;
   right: 0;
+  pointer-events: none;
 }
 
 html /deep/ paper-item::shadow #icon {
   margin-right: 8px;
 }
+
+html /deep/ paper-item::shadow ::content > a {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

paper-item.html

@@ -16,11 +16,19 @@
 Example:
 
     <core-menu>
-        <paper-item icon="refresh">Refresh</paper-item>
-        <paper-item>Help</paper-item>
-        <paper-item>Sign Out</paper-item>
+        <paper-item icon="refresh" label="Refresh"></paper-item>
+        <paper-item label="Help"></paper-item>
+        <paper-item label="Sign Out"></paper-item>
     </core-menu>
 
+To use as a link, put an `&lt;a&gt;` element in the item.
+
+Example:
+
+    <paper-item icon="home" label="Home">
+        <a href="http://www.polymer-project.org"></a>
+    </paper-item>
+
 @class paper-item
 -->
 
@@ -30,7 +38,7 @@
 
 <link href="paper-item.css" rel="stylesheet" shim-shadowdom>
 
-<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout on-click="{{clickAction}}">
+<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout>
 
   <template>
 
@@ -77,7 +85,20 @@
          */
         icon: {value: ''}
 
-     }
+      },
+
+      eventDelegates: {
+        'down': 'downAction',
+        'up': 'upAction'
+      },
+
+      downAction: function(e) {
+        this.$.ripple.downAction(e);
+      },
+
+      upAction: function(e) {
+        this.$.ripple.upAction(e);
+      }
     });
   </script>
 </polymer-element>