University of Leeds Design System v1.0.13

Breadcrumbs

No notes defined.

{% if breadcrumbs.length %}
<nav aria-label="Breadcrumb" class="uol-breadcrumb">
    <ol class="uol-breadcrumb__list">
        {% for item in breadcrumbs %}
            <li class="uol-breadcrumb__item">
                {% if item.href %}<a class="uol-breadcrumb__link" href="{{ item.href }}">{% endif %}
                  {{ item.title }}
                {% if item.href %}</a>{% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>
{% endif %}
 
<nav aria-label="Breadcrumb" class="uol-breadcrumb">
    <ol class="uol-breadcrumb__list">

        <li class="uol-breadcrumb__item">
            <a class="uol-breadcrumb__link" href="/secion">
                Section title
            </a>
        </li>

        <li class="uol-breadcrumb__item">
            <a class="uol-breadcrumb__link" href="/section/section">
                Maecenas faucibus mollis interdum
            </a>
        </li>

        <li class="uol-breadcrumb__item">
            <a class="uol-breadcrumb__link" href="/section/section/section">
                Lorem ipsum dolor sit amet consectetur adipiscing elit
            </a>
        </li>

        <li class="uol-breadcrumb__item">
            <a class="uol-breadcrumb__link" href="/section/section/section/section">
                Mattis Ultricies Adipiscing Vestibulum
            </a>
        </li>

    </ol>
</nav>
  • Content: 
    .uol-breadcrumb {
  padding: $spacing-5 $spacing-4 0;

  @include media(">=uol-media-xs") {
    padding: $spacing-5 $spacing-4 0;
  }

  @include media(">=uol-media-m") {
    padding: $spacing-5 $spacing-4 0;
  }

  @include media(">=uol-media-l") {
    padding: $spacing-6 0 0;
    margin: 0 $spacing-5;
  }

  @include media(">=uol-media-xl") {
    margin: 0 $spacing-6;
  }

  .uol-banner-outer + .uol-content-container & {
    @include media(">=uol-media-l") {
      padding-top: $spacing-2;
    }
  }
}

  .uol-breadcrumb__list {
    @include font-size-responsive(0.875rem, 0.875rem, 1rem);

    margin: 0;
    padding: 0 0 $spacing-4;
    list-style: none;
    border-bottom: 1px solid $color-border--light;

    @include media(">=uol-media-m") {
      padding-bottom: $spacing-5;
    }

    @include media(">=uol-media-l") {
      padding-bottom: $spacing-6;
    }
  }

  .uol-breadcrumb__item {

    &::before {
      content: "<";
      margin-right: 0.3em;
    }

    @include media("<uol-media-m") {
      display: none;

      &:last-of-type {
        display: inline-block;
      }
    }

    @include media(">=uol-media-m") {
      display: inline-block;

      &::before {
        content: ">";
        margin-right: 0.3em;
      }

      &:first-of-type {

        &::before {
          content: none;
        }
      }
    }
  }

  .uol-breadcrumb__link {
    @include link_focus(2px, false);

    padding: 0.5em;
    transition: text-decoration-color 0.3s ease;

    &:hover {
      text-decoration-color: $color-brand;
    }

    &:first-of-type {
      padding-left: 0;
    }
  }
  • URL: /components/raw/uol-breadcrumb/_breadcrumbs.scss
  • Filesystem Path: src/library/02-components/breadcrumbs/_breadcrumbs.scss
  • Size: 1.6 KB 
{
  "breadcrumbs": [
    {
      "title": "Section title",
      "href": "/secion"
    },
    {
      "title": "Maecenas faucibus mollis interdum",
      "href": "/section/section"
    },
    {
      "title": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
      "href": "/section/section/section"
    },
    {
      "title": "Mattis Ultricies Adipiscing Vestibulum",
      "href": "/section/section/section/section"
    }
  ]
}