{% extends 'layouts/lab-side-content.html' %}

{% from 'macros/lab-example.html' import LabExample %}
{% from 'macros/lab-code.html' import LabCode %}

{% set pageType = "components" %}
{% set pageId = "breadcrumb" %}

{% block content %}
  <h1>Breadcrumb</h1>

  <h3>Usage</h3>

  {{LabExample(pageType, pageId)}}
  {{LabCode('html', '
  <ol class="c-breadcrumb">
    <li class="c-breadcrumb__item" itemscope="itemscope" itemtype="http://data-vocabulary.org/breadcrumb">
      <a class="c-breadcrumb__link" href="https://example.com/" itemprop="url">
        <span itemprop="title">home</span>
      </a>
    </li>
    <li class="c-breadcrumb__item" itemscope="itemscope" itemtype="http://data-vocabulary.org/breadcrumb">
      <a class="c-breadcrumb__link" href="https://example.com/furniture/" itemprop="url">
        <span itemprop="title">furniture</span>
      </a>
    </li>
    <li class="c-breadcrumb__item is-active" itemscope="itemscope" itemtype="http://data-vocabulary.org/breadcrumb">
      <a class="c-breadcrumb__link" href="https://example.com/arts/furniture/kitchen/" itemprop="url">
        <span itemprop="title">kitchen</span>
      </a>
    </li>
  </ol>
  ')}}
{% endblock %}