title: Polymer 2.0 menu tabs with content
body: <p>I am new to the Google Polymer Project. I just initialize a project to make a custom website design with Polymer. However, i would like to know how to build navbar menu with specific pages. I need to show separate content on the body when we click on each tabs. Any help would be greatly appreciated !!</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>iron-image {
    width: 400px;
    height: 400px;
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;base href="https://cdn.rawgit.com/download/polymer-cdn/1.5.0/lib/"&gt;
  &lt;script src="webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
  
  &lt;link rel="import" href="paper-styles/classes/global.html"&gt;
  &lt;link rel="import" href="paper-tabs/paper-tabs.html"&gt;
  
  &lt;style is="custom-style"&gt;
    :root {
      --paper-tabs-selection-bar-color: var(--paper-light-blue-900);
      --paper-tab-ink: var(--paper-light-blue-100);
    
      --paper-tabs: {
        color: white;
        background-color: var(--paper-light-blue-500);
      };
    }
  &lt;/style&gt;
  
  &lt;paper-tabs selected="0"&gt;
    &lt;paper-tab&gt;TAB 1&lt;/paper-tab&gt;
    &lt;paper-tab&gt;TAB 2&lt;/paper-tab&gt;
    &lt;paper-tab&gt;TAB 3&lt;/paper-tab&gt;
  &lt;/paper-tabs&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/8boLeohf/" rel="nofollow noreferrer">https://jsfiddle.net/8boLeohf/</a></p>