use core-menu and core-item for dropdown

_includes/dropdown-panel.html

@@ -1,22 +1,13 @@
 <dropdown-panel>
-  <polymer-ui-menu-item
-    src="/images/picons/ic_book_dark_.png"
-    label="Learn"
-    href="/docs/start/tutorial/intro.html"
-    {% if page.navgroup == 'docs' %}active{% endif %}>
-  </polymer-ui-menu-item>
+  <core-item icon="book" label="Learn" {% if page.navgroup == 'docs' %}active{% endif %}>
+    <a href="/docs/start/tutorial/intro.html"></a>
+  </core-item>
 
-  <polymer-ui-menu-item
-    src="/images/picons/ic_feedback_dark_.png"
-    label="Elements"
-    href="/docs/elements/"
-    {% if page.navgroup == 'elements' %}active{% endif %}>
-  </polymer-ui-menu-item>
+  <core-item icon="drive-document" label="Elements" {% if page.navgroup == 'elements' %}active{% endif %}>
+    <a href="/docs/elements/"></a>
+  </core-item>
 
-  <polymer-ui-menu-item
-    src="/images/picons/ic_feedback_dark_.png"
-    label="Resources"
-    href="/resources/faq.html"
-    {% if page.navgroup == 'resources' %}active{% endif %}>
-  </polymer-ui-menu-item>
+  <core-item icon="list" label="Resources" {% if page.navgroup == 'resources' %}active{% endif %}>
+    <a href="/resources/faq.html"></a>
+  </core-item>
 </dropdown-panel>

elements/dropdown-panel.html

@@ -1,6 +1,6 @@
 <link rel="import" href="../components/polymer/polymer.html">
-<link rel="import" href="../components/polymer-ui-menu/polymer-ui-menu.html">
-<link rel="import" href="../components/polymer-ui-arrow/polymer-ui-arrow.html">
+<link rel="import" href="../components/core-menu/core-menu.html">
+<link rel="import" href="../components/core-item/core-item.html">
 
 <polymer-element name="dropdown-panel" attributes="open ajaxify">
   <template>
@@ -29,32 +29,31 @@
       transition: .04s transform, 0.025s opacity;
     }
 
-    polymer-ui-arrow {
+/*    polymer-ui-arrow {
       position: absolute;
       top: -18px;
       left: 177px;
-    }
+    }*/
 
-    polyfill-next-selector { content: ':host polymer-ui-menu-item #label'; }
-    ::content polymer-ui-menu-item /deep/ #label {
+    polyfill-next-selector { content: ':host core-item #label'; }
+    ::content core-item /deep/ #label {
       font-weight: 300;
     }
 
-    polyfill-next-selector { content: ':host polymer-ui-menu-item polymer-ui-icon'; }
-    ::content polymer-ui-menu-item::shadow polymer-ui-icon {
+    polyfill-next-selector { content: ':host core-item core-icon'; }
+    ::content core-item::shadow core-icon {
       background-size: 48px !important;
     }
 
-    polyfill-next-selector { content: ':host polymer-ui-menu-item[active]'; }
-    ::content polymer-ui-menu-item[active] {
+    polyfill-next-selector { content: ':host core-item[active]'; }
+    ::content core-item[active] {
       background: rgba(0, 0, 0, 0.04);
       border: 1px solid #d9d9d9;
     }
     </style>
-    <polymer-ui-menu id="mainmenu" on-click="{{onClick}}">
+    <core-menu id="mainmenu" on-click="{{onClick}}">
       <content></content>
-      <polymer-ui-arrow direction="up" size="9"></polymer-ui-arrow>
-    </polymer-ui-menu>
+    </core-menu>
   </template>
   <script>
   Polymer('dropdown-panel', {
@@ -63,7 +62,7 @@
     },
     ajaxify: false,
     attached: function() {
-      var active = this.querySelector('polymer-ui-menu-item[active]');
+      var active = this.querySelector('core-item[active]');
       var index = Array.prototype.indexOf.call(this.children, active);
       this.$.mainmenu.selected = index;
     },
@@ -78,7 +77,7 @@
       document.body.addEventListener('click', close, true);
     },
     onClick: function(e, detail, sender) {
-      if (e.target.localName == 'polymer-ui-menu-item') {
+      if (e.target.localName == 'core-item') {
         if (this.ajaxify) {
           this.fire('click', {link: e.target});
           e.preventDefault();