University of Leeds Design System v1.0.14.2

In Page Navigation

No notes defined.

{% if items.length %}
  <nav class="uol-in-page-navigation {{ 'uol-in-page-navigation--with-accordion' if items.length > 5 }}" aria-label="Contents">
    {% if items.length > 5 %}
      {% render '@uol-accordion', { accordions: [{
        'title': 'Contents',
        'list': items
      }]}%}
    {% else %}
    <h2 class="uol-in-page-navigation__title">Contents</h2>
      <ul>
        {% for item in items %}
          <li>
            <a href="{{ item.url }}" {% if item.current == true %} aria-current="page" {% endif %}>{{ item.text }}</a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </nav>
{% endif %}
 
<nav class="uol-in-page-navigation " aria-label="Contents">

    <h2 class="uol-in-page-navigation__title">Contents</h2>
    <ul>

        <li>
            <a href="/home" aria-current="page">Rewarding Careers</a>
        </li>

        <li>
            <a href="/home">Careers support</a>
        </li>

        <li>
            <a href="/home">Internship opportunities</a>
        </li>

        <li>
            <a href="/home">Enterprise and volunteering</a>
        </li>

        <li>
            <a href="/home">Next steps</a>
        </li>

    </ul>

</nav>
  • Content: 
    .uol-in-page-navigation {
  background-color: $color-brand--faded;
  max-width: 47.5rem;
  margin-top: $spacing-5;

  &:not(.uol-in-page-navigation--with-accordion) {
    padding: $spacing-4;
    border-radius: 12px;
    margin-bottom: $spacing-5;
  }

  @include media("<uol-media-s") {
    margin-left: -#{$spacing-1};
    margin-right: -#{$spacing-1};
  }

  @include media(">=uol-media-m") {
    margin-top: $spacing-6;
    margin-bottom: $spacing-6;
  }

  @include media(">=uol-media-l") {
    margin-top: $spacing-7;
    margin-bottom: $spacing-7;
  }

  &.uol-in-page-navigation--with-accordion {

    .uol-accordion {
      border-top-color: $color-border;
      border-bottom-color: $color-border;
    }

    .uol-accordion__title {
      padding: 0 $spacing-4;
    }

    .uol-accordion__btn,
    .uol-accordion__btn[aria-expanded="true"] {
      box-sizing: border-box;
      text-decoration: none;
      color: $color-font;
      margin-left: -#{$spacing-4};
      margin-right: -#{$spacing-4};
      padding-left: $spacing-4;
      padding-right: $spacing-4;
      width: calc(100% + #{$spacing-6});

      &:hover,
      &:focus {
        text-decoration: none;
      }
    }

    .uol-accordion__content {
      padding: 0 $spacing-4 $spacing-6;
    }
  }

  .uol-in-page-navigation__title {
    @include font-size-responsive(1.125rem, 1.25rem, 1.25rem);

    margin: 0;
    color: $color-font;
  }

  ul {
    padding: 0 $spacing-4;
    border-radius: 12px;
    margin: $spacing-2 0 $spacing-4;
  }

  li {
    padding: 0 0 $spacing-3 $spacing-3;
    position: relative;

    &::marker {
      content: "—";
      position: absolute;
      color: $color-border;
      font-size: 1rem;
    }

    &:last-of-type {
      padding-bottom: 0;
    }

    a {
      @include font-size-responsive(1rem, 1rem, 1.125rem);

      font-family: $font-family-serif;
      line-height: 1.625;
      color: $color-font--light;

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

      @include media(">=uol-media-m") {
        line-height: 1.556;
      }

      &[aria-current="page"] {
        color: $color-font--dark;
        font-weight: 600;
      }
    }
  }
}
  • URL: /components/raw/uol-in-page-nav/_in-page-nav.scss
  • Filesystem Path: src/library/02-components/in-page-nav/_in-page-nav.scss
  • Size: 2.2 KB 
{
  "items": [
    {
      "url": "/home",
      "text": "Rewarding Careers",
      "current": true
    },
    {
      "url": "/home",
      "text": "Careers support"
    },
    {
      "url": "/home",
      "text": "Internship opportunities"
    },
    {
      "url": "/home",
      "text": "Enterprise and volunteering"
    },
    {
      "url": "/home",
      "text": "Next steps"
    }
  ]
}