aqa-breadcrumb.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../polymer/lib/elements/dom-repeat.html">
<link rel="import" href="../aqa-font/aqa-mitr-font.html">
<dom-module id="aqa-breadcrumb">
    <template>
        <style>
              ul{
                padding: 0px;
                margin: 0px;
            }
            ul.breadcrumb {
                /* padding: 10px 16px; */
                list-style: none;
            }

            ul.breadcrumb li {
                display: inline;
                font-size: 1rem;
            }

            ul.breadcrumb li+li:before {
                padding: 8px;
                color: black;
                content: ">";
            }
            ul.breadcrumb li:last-of-type a{
                color:black
            }
            ul.breadcrumb li:last-of-type a:hover{
                color:black;
                text-decoration: none;
                cursor: no-drop;
            }
            ul.breadcrumb li a {
                color: #0275d8;
                text-decoration: none;
            }

            ul.breadcrumb li a:hover {
                color: #01447e;
                text-decoration: underline;
            }
            a{
                font-family: MitrLight;
            }
        </style>

        <ul class="breadcrumb">
             <template is="dom-repeat" items="[[items]]"> 
                <li>
                    <a href$="[[item.url]]">[[item.label]]</a>
                </li>
             </template> 
        </ul>
    </template>
    <script>
        class AqaBreadcrumb extends Polymer.Element {
            static get is() { return 'aqa-breadcrumb'; }
            static get properties() {
                return {
                    items:{
                        type:Array,
                        value:[]
                    }
                }
            }
        }
        window.customElements.define(AqaBreadcrumb.is, AqaBreadcrumb);
    </script>
</dom-module>