madelinelise
8/28/2019 - 1:07 PM

Breadcrumb Component

{
  "breadcrumb": [
    {
      "url": "http://bing.com",
      "text": "This is item one"
    },
    {
      "url": "http://bing.com",
      "text": "Two"
    },
    {
      "url": "http://bing.com",
      "text": "This is 3"
    },
    {
      "url": "http://bing.com",
      "text": "Karate School"
    }
  ]
}
// Breadcrumbs
//
// Styles for the Breadcrumbs Component.

// Import site utilities.
@import '../../00-global/utils/init';

.breadcrumb {
  width: 100%;
  display: none;
  flex-wrap: wrap;
  justify-content: flex-start;

  @include breakpoint($bp-sm) {
    display: flex;
  }
}

.breadcrumb--container {
  padding: 0.5rem 0;
  display: none;

  @include breakpoint($bp-sm) {
    display: block;
  }
}

.breadcrumb__item {
  color: $color-black;
  font-size: 1rem;
  margin-left: 0.75rem;
  position: relative;
  text-decoration: none;

  a {
    color: $color-black;
  }

  &:first-child {
    margin: 0;
  }

  &::after {
    content: '>';
    margin-left: 0.5rem;
  }

  &:last-child {
    &::after {
      display: none;
    }
  }
}
{{ attach_library('@theme/breadcrumb') }}

{% if breadcrumb %}
  <nav role="navigation" aria-labelledby="system-breadcrumb" class="breadcrumb--container">
    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
    <ol class="breadcrumb">
      {% for item in breadcrumb %}
        <li class="breadcrumb__item">
          {% if item.url %}
            <a href="{{ item.url }}">{{ item.text }}</a>
          {% else %}
            <span class="breadcrumb__current">{{ item.text }}</span>
          {% endif %}
        </li>
      {% endfor %}
    </ol>
  </nav>
{% endif %}
breadcrumb:
  - text: About
    url: "#"
  - text: Dimensions of Energy
    url: "#"
  - text: Current Page
    url: ""
{#
/**
 * @file
 * Theme override for a breadcrumb trail.
 *
 * Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */
#}
  {%
    include '@theme/breadcrumb/breadcrumb.twig' with {
      breadcrumb: breadcrumb
    } only
  %}