Search code examples
javascripthtmlpolymersubmenu

Polymer core-submenu not showing the submenu but only its items

I am trying to work with Polymer 0.5.5 and its core features. When I tried to use Menu mixed with some SubMenu, the output is not was I expected. See sample source code:

<core-menu selected="{{Selected}}" selectedItem={{MenuItem}}>
  <core-submenu icon="print" label="Printer" selectedItem={{SubMenuItem}}>
    <core-item label="Printer Papers"></core-item>
    <core-item label="Printer Networks"></core-item>
  </core-submenu>
  <core-item icon="cloud" label="HotFolder"></core-item>
  <core-item icon="settings" label="Settings"></core-item>
</core-menu>

In my case, only the items of the subMenu are showing up, i.e. the Submenu entry and its icon are missing, and I can't get the label via the SubMenuItem. The selected variable is 0 in this case which is logical but doesn't help... My browser is Chrome 40.x which should be sufficient in terms of compatibility.

Solution

  • You miss an import of the core-submenu element. Try an import of core-elements instead, it worked in one of my tests. In your document this should be something like that:

    <link rel="import" href="//www.polymer-project.org/components/core-elements/core-elements.html">