{% if page.categories and page.categories != empty %}
  <nav class="breadcrumbs">
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="{{ site.url }}" itemprop="url">
        <span itemprop="title">Home</span>
      </a> › 
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="{{ site.url }}/{{ page.categories | first }}/" itemprop="url">
        <span itemprop="title">{{ page.categories | first | replace: '-',' ' | capitalize }}</span>
      </a>
    </span>
  </nav><!-- /.breadcrumbs -->
{% endif %}