Component Library

Breadcrumbs 

<ol class="breadcrumb">
    <li class="breadcrumb__item">
        <a class="breadcrumb__link" href="#" title="Link title 1">Link text 1</a>
    </li>
    <li class="breadcrumb__item">
        <a class="breadcrumb__link" href="#" title="Link title 2">Link text 2</a>
    </li>
    <li class="breadcrumb__item">
        <span class="breadcrumb__link--active">Link text 3</span>
    </li>
</ol>

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "item": {
                    "@id": #,
                    "name": Link text 1
                }
            },
            {
                "@type": "ListItem",
                "position": 2,
                "item": {
                    "@id": #,
                    "name": Link text 2
                }
            },
            {
                "@type": "ListItem",
                "position": 3,
                "item": {
                    "@id": #,
                    "name": Link text 3
                }
            }
        ]
    }
</script>
 
<ol class="breadcrumb">
    {{#each breadcrumbLinks}}
      <li class="breadcrumb__item">
          {{#compare ../breadcrumbLinks.length (math @index "+" 1) operator="!="}}
            <a class="breadcrumb__link" href="{{url}}" title="{{title}}">{{text}}</a>
          {{else}}
            <span class="breadcrumb__link--active">{{text}}</span>
          {{/compare}}
      </li>
    {{/each}}
</ol>

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {{#each breadcrumbLinks}}
    {
    "@type": "ListItem",
    "position": {{math @index "+" 1}},
    "item":
      {
        "@id": {{url}},
        "name": {{text}}
      }
    }{{#compare ../breadcrumbLinks.length (math @index "+" 1) operator="!="}},{{/compare}}
  {{/each}}
 ]
}
</script>
 
{
  "breadcrumbLinks": [
    {
      "url": "#",
      "text": "Link text 1",
      "title": "Link title 1"
    },
    {
      "url": "#",
      "text": "Link text 2",
      "title": "Link title 2"
    },
    {
      "url": "#",
      "text": "Link text 3",
      "title": "Link title 3"
    }
  ]
}
  • Content: 
    .breadcrumb {
    padding: 10px;
    margin-bottom: 30px;
    font-size: 14px;

    &__item {
        display: inline-block;

        & + &:before {
            content: '/';
            padding-top: 5px;
            padding: 5px 0;
            color: #666;
        }

        /* Active state */
        &--active {
            color: #000;
        }
    }
    &__link {
        color: #666;
    }
}
  • URL: /components/raw/breadcrumb/breadcrumb.css
  • Filesystem Path: src/02-molecules/breadcrumb/breadcrumb.css
  • Size: 400 Bytes

There are no notes for this item.