layout.html

<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-scaffold/core-scaffold.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-header-panel/core-header-panel.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-item/core-item.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icons/social-icons.html">
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icons/hardware-icons.html">
<link rel="import" href="../css/core-style.html">

<polymer-element name="scaffold-layout" attributes="selected color" noscript>
  <template>
    <core-style ref="layout"></core-style>
    <style>
      core-toolbar {
        background-color: #2f83d0;
        color: #fff;
        border-bottom: 1px solid #ddd;
      }
      .content {
        padding: 5px 20px 40px 20px;
      }
      :host /deep/ core-header-panel[main] {
        background-color: #fff;
      }
      core-header-panel {
        background-color: #fff;
      }
      core-header-panel core-item {
        padding: 2px 12px;
        line-height: 40px;
      }
      core-header-panel core-item:not(:first-of-type) {
        border-top: 1px solid #f5f5f5;
      }
      core-header-panel core-item:hover,
      core-header-panel core-item:focus {
        background-color: #fcfcfc;
        color: #222;
      }
      core-header-panel core-item[active] {
        border-right: 6px solid #f5f5f5;
      }
    </style>
    <core-scaffold>
      <core-header-panel navigation flex mode="seamed">
        <core-toolbar class="{{color}}">&lt;app-router&gt;</core-toolbar>
        <div>
          <core-item icon="home" label="Home" active?="{{selected == 'home'}}"><a is="pushstate-anchor" href="#/"></a></core-item>
          <core-item icon="settings" label="API" active?="{{selected == 'api'}}"><a is="pushstate-anchor" href="#/api"></a></core-item>
          <core-item icon="polymer" label="Data Binding" active?="{{selected == 'databinding'}}"><a is="pushstate-anchor" href="#/databinding/1337?queryParam1=Routing%20with%20Web%20Components!"></a></core-item>
          <core-item icon="hardware:phonelink" label="Layouts" active?="{{selected == 'layouts'}}"><a is="pushstate-anchor" href="#/layouts"></a></core-item>
          <core-item icon="hardware:mouse" label="Lifecycle Events" active?="{{selected == 'events'}}"><a is="pushstate-anchor" href="#/events"></a></core-item>
          <core-item icon="swap-horiz" label="core-animated-pages" active?="{{selected == 'core-animated-pages'}}"><a is="pushstate-anchor" href="#/core-animated-pages"></a></core-item>
          <core-item icon="info-outline" label="Notes" active?="{{selected == 'notes'}}"><a is="pushstate-anchor" href="#/notes"></a></core-item>
          <core-item icon="subject" label="Example Code"><a href="https://github.com/erikringsmuth/app-router-examples"></a></core-item>
          <core-item icon="social:public" label="GitHub"><a href="https://github.com/erikringsmuth/app-router"></a></core-item>
        </div>
      </core-header-panel>
      <div tool>
        <content select=".title"></content>
      </div>
      <div class="content">
        <content></content>
      </div>
    </core-scaffold>
  </template>
</polymer-element>