vanilla-breadcrumbs.html

<link rel="import" href="bower_components/polymer/polymer.html">

<!--
Example:
    <vanilla-breadcrumbs>
      <a href="#">Breadcrumb1</a>
      <a href="#">Breadcrumb2</a>
      <a href="#">Breadcrumb3</a>
      <a href="#">Breadcrumb4</a>
    </vanilla-breadcrumbs>

@demo demo/vanilla-breadcrumbs.html
-->

<dom-module id="vanilla-breadcrumbs">
  <template>
    <link rel="stylesheet" href="css/vanilla-breadcrumbs.css">
      <nav class="p-breadcrumbs">
        <content id="content"></content>
      </nav>
  </template>

  <script>
    Polymer({
      is: 'vanilla-breadcrumbs',

      ready: function() {
        let linkNodes = this.getContentChildren('#content');
        linkNodes.forEach(function(linkNode) {
          linkNode.classList.add('p-breadcrumbs__link');
      });
      },
    });
  </script>
</dom-module>