Paper-tabs with links display issue

Question

I am writing a polymer single page website using page.js, just like in the polymer-starter-kit. Instead of using a paper-menu for the routing, I am using paper-tabs.

So the routing is working and everything, but I can't get the paper-tabs to look like paper-tabs anymore. They just look like links and I can't see the selection bar at the bottom.

Any idea what I'm doing wrong?

index.html

<!-- Main Toolbar -->
    <paper-toolbar id="mainToolbar" class="medium-tall">
      <!-- Application name -->
      <div class="app-name">Website</div>

      <span class="space"></span>

      <!-- Toolbar icons -->
      <paper-icon-button icon="refresh"></paper-icon-button>
      <paper-icon-button icon="search"></paper-icon-button>

      <!-- Application tabs -->
      <paper-tabs class="bottom" attr-for-selected="data-route" selected="[[route]]">
        <paper-tab link>
          <a data-route="home" href="{{baseUrl}}">
            <iron-icon icon="home"></iron-icon>
            <span>Home</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="artist" href="{{baseUrl}}artist">
            <iron-icon icon="home"></iron-icon>
            <span>Artist</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="teacher" href="{{baseUrl}}teacher">
            <iron-icon icon="home"></iron-icon>
            <span>Teacher</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="research" href="{{baseUrl}}research">
            <iron-icon icon="home"></iron-icon>
            <span>Research</span>
          </a>
        </paper-tab>
        <paper-tab link>
          <a data-route="contact" href="{{baseUrl}}contact">
            <iron-icon icon="mail"></iron-icon>
            <span>Contact</span>
          </a>
        </paper-tab>
      </paper-tabs>
    </paper-toolbar>

    <!-- Main Content -->
    <div class="content">
      <iron-pages attr-for-selected="data-route" selected="{{route}}">
        <section data-route="home">
          <paper-material elevation="1">
            <my-greeting></my-greeting>

            <p class="subhead">You now have:</p>
            <my-list></my-list>

            <p>Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p>
          </paper-material>
        </section>

        <section data-route="artist">
          <paper-material elevation="1">
            <h2 class="page-title">Users</h2>
            <p>This is the users section</p>
            <a href$="{{baseUrl}}users/Addy">Addy</a><br>
            <a href$="{{baseUrl}}users/Rob">Rob</a><br>
            <a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
            <a href$="{{baseUrl}}users/Sam">Sam</a>
          </paper-material>
        </section>

        <section data-route="teacher">
          <paper-material elevation="1">
            <h2 class="page-title">User: {{params.name}}</h2>
            <div>This is {{params.name}}'s section</div>
          </paper-material>
        </section>

        <section data-route="contact">
          <paper-material elevation="1">
            <h2 class="page-title">Contact</h2>
            <p>This is the contact section</p>
          </paper-material>
        </section>
      </iron-pages>
    </div>

Answer 1

I think I understood your problem. When your click on tabs, they are not save the states of click and selected tab.

This answer will partly clarify the problem Change URL in address bar after click on DOM element with javascript/jquery

In Polymer I have the same problem, but with menu items. I think your can resolve it in this way:

1). Use app-router instead page.js and add pushstate mode to it mode='pushstate'.

2). Include pushstate-anchor to your page before include the app-router <link rel="import" href="../bower_components/pushstate-anchor/pushstate-anchor.html">. This will save all links and reloading the page will not be.