University of Leeds Design System v1.0.15

Section Navigation: Default

No notes defined.

{% macro menuItem(item, headingLevel) %}
  <li class="uol-section-nav__item {{ 'uol-section-nav__item--parent' if item.items }}">
    {% if item.url and not item.items %}
    <a class="uol-section-nav__link" href="{{ item.url }}" {% if item.current %}aria-current="page"{% endif %}>
      <span class="uol-section-nav__item__label">{{ item.title }}</span>
    </a>
    {% else %}
      {% if headingLevel < 7 %} {# There is no h7 #}
        <h{{ headingLevel }} class="uol-section-nav__item__label">{{ item.title }}</h{{ headingLevel }}>
      {% else %} {# So output span instead of heading #}
        <span class="uol-section-nav__item__label">{{ item.title }}</span>
      {% endif %}
    {% endif %}
    {% if item.items %}
      {# increment headingLevel to maintain semantic headings tags #}
      {% set headingLevel = headingLevel + 1 %}
      <ul class="uol-section-nav__sublist">
        {% for item in item.items %}
          {{ menuItem(item, headingLevel) }}
        {% endfor %}
      </ul>
    {% endif %}
  </li>
{% endmacro %}

{% if section_nav.items.length %}
<nav class="uol-section-nav" aria-label="Section navigation">
  <h2 class="uol-section-nav__title">
    <span class="uol-section-nav__title__intro">In this section</span>
    <span class="uol-section-nav__title__text">{{ section_nav.title }}</span>
  </h2>
  <ul class="uol-section-nav__list">
    {% for item in section_nav.items %}
    {# Set initial headingLevel that may be incremented in menuItem() #}
    {% set headingLevel = 3 %}
    {{ menuItem(item, headingLevel) }}
    {% endfor %}
  </ul>
</nav>
{% endif %}
 
<nav class="uol-section-nav" aria-label="Section navigation">
    <h2 class="uol-section-nav__title">
        <span class="uol-section-nav__title__intro">In this section</span>
        <span class="uol-section-nav__title__text">Undergraduate</span>
    </h2>
    <ul class="uol-section-nav__list">

        <li class="uol-section-nav__item ">

            <a class="uol-section-nav__link" href="/overview">
                <span class="uol-section-nav__item__label">Overview</span>
            </a>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Academic experience</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/learning_and_teaching">
                        <span class="uol-section-nav__item__label">Learning and teaching</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/academic_facilities">
                        <span class="uol-section-nav__item__label">Academic facilities</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Enrichment opportunities</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/study_abroad">
                        <span class="uol-section-nav__item__label">Study abroad</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/work_experience">
                        <span class="uol-section-nav__item__label">Work experience</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/clubs_and_societies">
                        <span class="uol-section-nav__item__label">Clubs and societies</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/student_enterprise">
                        <span class="uol-section-nav__item__label">Student enterprise</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Your future</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/careers">
                        <span class="uol-section-nav__item__label">Careers</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/leeds_for_life">
                        <span class="uol-section-nav__item__label">Leeds for Life</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Campus life</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item uol-section-nav__item--parent">

                    <h4 class="uol-section-nav__item__label">City life</h4>

                    <ul class="uol-section-nav__sublist">

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/city_life/overview">
                                <span class="uol-section-nav__item__label">City life overview</span>
                            </a>

                        </li>

                    </ul>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/wellbeing_and_support">
                        <span class="uol-section-nav__item__label">Wellbeing and support</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/sport_and_fitness">
                        <span class="uol-section-nav__item__label">Sport and fitness</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/a_global_university">
                        <span class="uol-section-nav__item__label">A global university</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Fees and costs</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/undergraduate_fees">
                        <span class="uol-section-nav__item__label">Undergraduate fees</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/additional_costs">
                        <span class="uol-section-nav__item__label">Additional costs</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/living_expenses">
                        <span class="uol-section-nav__item__label">Living expenses</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/tuition_fee_liability">
                        <span class="uol-section-nav__item__label">Tuition fee liability</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/tuition_fee_payment_schedule">
                        <span class="uol-section-nav__item__label">Tuition fee payment schedule</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/how_to_pay">
                        <span class="uol-section-nav__item__label">How to pay</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/sponsored_students">
                        <span class="uol-section-nav__item__label">Sponsored students</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/paying_for_your_accommodation">
                        <span class="uol-section-nav__item__label">Paying for your accommodation</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Funding</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/funding">
                        <span class="uol-section-nav__item__label">Funding overview</span>
                    </a>

                </li>

                <li class="uol-section-nav__item uol-section-nav__item--parent">

                    <h4 class="uol-section-nav__item__label">University scholarships and funding</h4>

                    <ul class="uol-section-nav__sublist">

                        <li class="uol-section-nav__item uol-section-nav__item--parent">

                            <h5 class="uol-section-nav__item__label">Leeds financial support</h5>

                            <ul class="uol-section-nav__sublist">

                                <li class="uol-section-nav__item ">

                                    <a class="uol-section-nav__link" href="/leeds_financial_support_eligibility">
                                        <span class="uol-section-nav__item__label">Leeds financial support eligibility</span>
                                    </a>

                                </li>

                                <li class="uol-section-nav__item ">

                                    <a class="uol-section-nav__link" href="/how_much_is_it_worth">
                                        <span class="uol-section-nav__item__label">How much is it worth?</span>
                                    </a>

                                </li>

                                <li class="uol-section-nav__item ">

                                    <a class="uol-section-nav__link" href="/choosing_your_support">
                                        <span class="uol-section-nav__item__label">Choosing your support</span>
                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="uol-section-nav__item uol-section-nav__item--parent">

                            <h5 class="uol-section-nav__item__label">Scholarships | personal circumstances</h5>

                            <ul class="uol-section-nav__sublist">

                                <li class="uol-section-nav__item ">

                                    <a class="uol-section-nav__link" href="/scholarships_personal_circumstances/scholarships">
                                        <span class="uol-section-nav__item__label">Scholarships</span>
                                    </a>

                                </li>

                                <li class="uol-section-nav__item ">

                                    <a class="uol-section-nav__link" href="/scholarships_personal_circumstances/scholarships_faqs">
                                        <span class="uol-section-nav__item__label">Scholarships FAQs</span>
                                    </a>

                                </li>

                            </ul>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/scholarships_academic_achievement">
                                <span class="uol-section-nav__item__label">Scholarships | academic achievement</span>
                            </a>

                        </li>

                    </ul>

                </li>

                <li class="uol-section-nav__item uol-section-nav__item--parent">

                    <h4 class="uol-section-nav__item__label">Student loans and bursaries</h4>

                    <ul class="uol-section-nav__sublist">

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/what_help_is_available">
                                <span class="uol-section-nav__item__label">What help is available?</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/eligibility_and_applications">
                                <span class="uol-section-nav__item__label">Eligibility and applications</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/tuition_fee_loans_for_new_part-time_students">
                                <span class="uol-section-nav__item__label">Tuition fee loans for new part-time students</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/nhs_funding">
                                <span class="uol-section-nav__item__label">NHS funding</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/financial_support_for_muslim_students">
                                <span class="uol-section-nav__item__label">Financial support for Muslim students</span>
                            </a>

                        </li>

                    </ul>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/international_funding">
                        <span class="uol-section-nav__item__label">International funding</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/government_part-time_maintenance_loans">
                        <span class="uol-section-nav__item__label">Government part-time maintenance loans</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/extra_financial_help">
                        <span class="uol-section-nav__item__label">Extra financial help</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/funds_available_after_you_arrive">
                        <span class="uol-section-nav__item__label">Funds available after you arrive</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Applying</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/how_to_apply">
                        <span class="uol-section-nav__item__label">How to apply</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/accepted_qualifications">
                        <span class="uol-section-nav__item__label">Accepted qualifications</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/application_timetable">
                        <span class="uol-section-nav__item__label">Application timetable</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/writing_your_personal_statement">
                        <span class="uol-section-nav__item__label">Writing your personal statement</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/alternative_admissions">
                        <span class="uol-section-nav__item__label">Alternative admissions</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/care_leavers_and_estranged_students">
                        <span class="uol-section-nav__item__label">Care leavers and estranged students</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/applying_faqs">
                        <span class="uol-section-nav__item__label">Applying FAQs</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/transparency_data">
                        <span class="uol-section-nav__item__label">Transparency data</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/degree_outcomes_statement">
                        <span class="uol-section-nav__item__label">Degree outcomes statement</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/declaring_criminal_convictions">
                        <span class="uol-section-nav__item__label">Declaring criminal convictions</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Types of course</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/part-time_and_mature_students">
                        <span class="uol-section-nav__item__label">Part-time and mature students</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/joint_honours">
                        <span class="uol-section-nav__item__label">Joint honours</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/foundation_courses">
                        <span class="uol-section-nav__item__label">Foundation courses</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/intercalating_and_integrated_masters">
                        <span class="uol-section-nav__item__label">Intercalating and Integrated Masters</span>
                    </a>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Teachers and advisors</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/teachers_and_advisors">
                        <span class="uol-section-nav__item__label">Teachers and advisors overview</span>
                    </a>

                </li>

                <li class="uol-section-nav__item uol-section-nav__item--parent">

                    <h4 class="uol-section-nav__item__label">Supporting students</h4>

                    <ul class="uol-section-nav__sublist">

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/he_talks_and_workshops">
                                <span class="uol-section-nav__item__label">HE talks and workshops</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/subject-specific_outreach">
                                <span class="uol-section-nav__item__label">Subject-specific outreach</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/online_courses_for_schools">
                                <span class="uol-section-nav__item__label">Online courses for schools</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/live_webinars_for_schools_and_colleges">
                                <span class="uol-section-nav__item__label">Live webinars for schools and colleges</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/research_and_study_skills">
                                <span class="uol-section-nav__item__label">Research and study skills</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/alternative_admissions">
                                <span class="uol-section-nav__item__label">Alternative admissions</span>
                            </a>

                        </li>

                    </ul>

                </li>

                <li class="uol-section-nav__item uol-section-nav__item--parent">

                    <h4 class="uol-section-nav__item__label">Supporting teachers and advisors</h4>

                    <ul class="uol-section-nav__sublist">

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/teachers_and_advisors_cpd_webinars">
                                <span class="uol-section-nav__item__label">Teachers and advisors CPD webinars</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/talks_in_schools">
                                <span class="uol-section-nav__item__label">Talks in schools</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/intouniversity">
                                <span class="uol-section-nav__item__label">IntoUniversity</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/students_into_schools">
                                <span class="uol-section-nav__item__label">Students into schools</span>
                            </a>

                        </li>

                        <li class="uol-section-nav__item ">

                            <a class="uol-section-nav__link" href="/epq_virtual_conference">
                                <span class="uol-section-nav__item__label">EPQ Virtual Conference</span>
                            </a>

                        </li>

                    </ul>

                </li>

            </ul>

        </li>

        <li class="uol-section-nav__item uol-section-nav__item--parent">

            <h3 class="uol-section-nav__item__label">Parents and carers</h3>

            <ul class="uol-section-nav__sublist">

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/supporting_your_son_or_daughter">
                        <span class="uol-section-nav__item__label">Supporting your son or daughter</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/tips_for_parents">
                        <span class="uol-section-nav__item__label">Tips for parents</span>
                    </a>

                </li>

                <li class="uol-section-nav__item ">

                    <a class="uol-section-nav__link" href="/parents_faqs">
                        <span class="uol-section-nav__item__label">Parents FAQs</span>
                    </a>

                </li>

            </ul>

        </li>

    </ul>
</nav>
  • Content: 
    # TODO

- [X] Fix z-index on local nav
- [X] Add escape to local nav and quicklinks
- [X] Fix nav widening when sub links open
- [ ] Improve default article with nav layout
- [ ] Provide person insight with/without examples
  • URL: /components/raw/uol-section-nav/TODO.md
  • Filesystem Path: src/library/02-components/section-nav/TODO.md
  • Size: 225 Bytes
  • Content: 
    .uol-section-nav {
  
  margin: 0;

  @include media(">=uol-media-m") {
    margin: 0;
  }

  @include media(">=uol-media-l") {
    margin: $spacing-4 0 0;
  }
  
  .js & {

    .uol-header & {
      @include media(">=uol-media-l") {
        display: none;
        padding-left: $spacing-2;
      }
    }
  }
}

  .uol-section-nav--relocated {
    .js & {

      @include media(">=uol-media-l") {
        display: block;
      }
    }

    .uol-article-container & {
      @extend .uol-col-l-3;

      padding-left: $spacing-2;
    }
  }

  .uol-section-nav__title {

    @include media("<uol-media-l") {
      margin: 0;
    }

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

  .uol-section-nav__title__intro {
    display: none;

    @include media(">=uol-media-l") {
      display: block;
      font-size: 1rem;
    }
  }

  .uol-section-nav__title__text {
    display: none;

    @include media(">=uol-media-l") {
      display: block;
      font-size: 1.5rem;
    }
  }

  .uol-section-nav__toggle {
    box-sizing: border-box;
    width: 100%;
    padding: $spacing-4;
    background: $color-brand;
    color: $color-white;
    font-size: 1.125rem;
    text-align: left;
    border: none;
    box-shadow:
      0 10px 20px 0 rgba($color-black--dark, 0.15),
      0 3px 6px 0 rgba($color-black--dark, 0.1);

    &[aria-expanded="true"] {
      box-shadow: none;
    }

    @include media(">=uol-media-l") {
      display: none;
    }
  }

    .uol-section-nav__toggle__icon {
      position: relative;
      display: inline-block;
      width: 18px;
      height: 2px;
      top: -6px;
      margin-right: $spacing-4;
      background: $color-white;
      transition: background 0.3s ease;

      &::before,
      &::after {
        content: "";
        display: block;
        position: absolute;
        width: inherit;
        height: inherit;
        background: $color-white;
        transition: all 0.3s ease;
      }

      &::before {
        top: -6px;
      }

      &::after {
        top: 6px;
      }

      .uol-section-nav__toggle[aria-expanded="true"] & {
        background: transparent;

        &::before {
          top: 0;
          transform: rotate(-45deg);
        }

        &::after {
          top: 0;
          transform: rotate(45deg);
        }
      }
    }

  .uol-section-nav__list {
    .js & {
    @include font-size-responsive(1.125rem, 1.25rem);

    list-style: none;

    @include media("<uol-media-l") {
        margin: 0;
        padding: $spacing-2 $spacing-4 $spacing-6 $spacing-7;
        box-shadow:
          0 10px 20px 0 rgba($color-black--dark, 0.15),
          0 3px 6px 0 rgba($color-black--dark, 0.1);
        display: none;
      }

      @include media(">=uol-media-l") {
        border-left: $spacing-1 solid $color-brand;
        padding-left: $spacing-6;
      }
    }
  }

    .uol-section-nav__list--expanded {
      .js & {
        display: block;
      }
    }

  .uol-section-nav__sublist {

    .js & {
      list-style: none;
      padding: 0 0 0 $spacing-5;
      display: none;
    }

    button[aria-expanded="true"] + & {
      display: block;
    }
  }

  .uol-section-nav__item {

  }

    .uol-section-nav__item--parent {

    }

    .uol-section-nav__item__label {
      .no-js & {
        margin: 0;
      }
    }

  .uol-section-nav__link,
  .uol-section-nav__branch-toggle {
    .js & {
      display: inline-block;
      box-sizing: border-box;
      position: relative;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: transparent;
      color: $color-font;
      border: none;
      padding: $spacing-3 $spacing-1 $spacing-2;
      margin-left: -$spacing-1;
      text-align: left;
      text-decoration: none;
      transition: background 0.15s ease-in;

      &:hover,
      &:focus {
        outline: 2px dotted transparent;
        text-decoration: underline;
        text-underline-offset: 6px;
        text-decoration-color: $color-brand;
        text-decoration-thickness: 4px;
      }

      &:focus-visible {
        background-color: $color-brand--faded;
      }

      &[aria-current] {
        &:not(:focus) {
          color: $color-brand;

          &:not(:hover) {
            text-decoration: underline;
          }
        }
      }
    }
  }

  .uol-section-nav__branch-toggle {
    overflow: visible;

    svg {
      position: absolute;
      left: -#{$spacing-4 + $spacing-4};
      top: $spacing-3;
      transition: transform 0.1s ease;
      fill: $color-font--dark;
    }

    &[aria-expanded="true"] {
      svg {
        transform: rotate(90deg) translateX(6.25%);
      }
    }
  }
  • URL: /components/raw/uol-section-nav/_section-nav.scss
  • Filesystem Path: src/library/02-components/section-nav/_section-nav.scss
  • Size: 4.7 KB
  • Content: 
    // Utilities
const getParents = (elem, selector) => {

	// Element.matches() polyfill
	if (!Element.prototype.matches) {
		Element.prototype.matches =
			Element.prototype.matchesSelector ||
			Element.prototype.mozMatchesSelector ||
			Element.prototype.msMatchesSelector ||
			Element.prototype.oMatchesSelector ||
			Element.prototype.webkitMatchesSelector ||
			function(s) {
				var matches = (this.document || this.ownerDocument).querySelectorAll(s),
					i = matches.length;
				while (--i >= 0 && matches.item(i) !== this) {}
				return i > -1;
			};
	}

	// Set up a parent array
	var parents = [];

	// Push each parent element to the array
	for ( ; elem && elem !== document; elem = elem.parentNode ) {
		if (selector) {
			if (elem.matches(selector)) {
				parents.push(elem);
			}
			continue;
		}
		parents.push(elem);
	}

	// Return our parent array
	return parents;

};

export const uolSectionNavToggle = () => {

  const sectionNavs = document.querySelectorAll('.uol-section-nav')

  sectionNavs.forEach((sectionNav) => {

    const sectionNavList = sectionNav.querySelector('.uol-section-nav__list')

    const sectionHeading = sectionNav.querySelector('.uol-section-nav__title')

    const sectionTitle = sectionHeading.querySelector('.uol-section-nav__title__text').innerText

    const button = document.createElement('button')
    button.type = 'button'
    button.setAttribute('aria-expanded', false)
    button.classList.add('uol-section-nav__toggle')
    button.innerHTML = `<span class="uol-section-nav__toggle__icon"></span>${sectionTitle}`

    sectionHeading.appendChild(button)

    button.onclick = () => {
      let expanded = button.getAttribute('aria-expanded') === 'true' || false

      button.setAttribute('aria-expanded', !expanded)

      sectionNavList.classList.toggle('uol-section-nav__list--expanded')

      // On close, close any child lists
      if (expanded) {
        sectionNavList.querySelectorAll('ul button').forEach(
          subButton => subButton.setAttribute('aria-expanded', 'false')
        )
      }
    }

    // Close on escape
    window.addEventListener("keydown", function(event) {

      if (event.key === 'Escape' || event.keyCode === 27) {
        // Toggle button
        button.setAttribute('aria-expanded', 'false')

        // Close nav
        sectionNavList.classList.remove('uol-section-nav__list--expanded')

        // Close children - if button visible ie small screen
        if (getComputedStyle(button).display !== 'none' ) {
          sectionNavList.querySelectorAll('ul button').forEach(
            subButton => subButton.setAttribute('aria-expanded', 'false')
          )
        }
      }

    }, true);

  })
}

export const uolSectionNavTree = () => {

  const svgChevronRight = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
    <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"></path>
  </svg>`

  const trees = document.querySelectorAll('.uol-section-nav')

  trees.forEach( (tree) => {

    const branches = tree.querySelectorAll('.uol-section-nav__item--parent')

    branches.forEach((branch) => {
      const label = branch.querySelector('.uol-section-nav__item__label')

      label.outerHTML = `
        <button class="uol-section-nav__branch-toggle" type="button" aria-expanded="false">
          ${svgChevronRight}
          ${label.innerText}
        </button>
      `

      // Open parents if child is aria-current
      const currentPage = branch.querySelector('[aria-current="page"]')
      if (currentPage) {
        const currentPageParents = getParents(currentPage, '.uol-section-nav__item--parent');

        currentPageParents.forEach( (parent) => {
          const parentButton = parent.querySelector('.uol-section-nav__branch-toggle')
          if (parentButton) {
            parentButton.setAttribute('aria-expanded', 'true')
          }
        })
      }

      const button = branch.querySelector('button')

      button.onclick = () => {

        let expanded = button.getAttribute('aria-expanded') === 'true' || false

        button.setAttribute('aria-expanded', !expanded)

        // On close, close any child lists
        if (expanded) {
          branch.querySelectorAll('ul button').forEach(
            subButton => subButton.setAttribute('aria-expanded', 'false')
          )
        }
      }

    })
  })
}

export const uolSectionNavMove = () => {

  const sectionNavs = document.querySelectorAll('.uol-section-nav')

  sectionNavs.forEach((sectionNav) => {
    const main = document.getElementById('main')
    const uolHeader = document.querySelector('.uol-header')
    const sectionNavContainer = document.querySelector('.uol-side-nav-container')

    if (main && sectionNavContainer) {
      window.addEventListener('resize', () => {
        if (window.innerWidth >= 1024) {
          sectionNavContainer.classList.add('uol-side-nav-container--populated')
          sectionNavContainer.insertAdjacentElement('afterbegin', sectionNav)
        } else {
          sectionNavContainer.classList.remove('uol-side-nav-container--populated')
          uolHeader.insertAdjacentElement('afterend', sectionNav)
        }
      })
    }

    if (typeof(Event) === 'function') {
      // modern browsers
      window.dispatchEvent(new Event('resize'));
    } else {
        // for IE and other old browsers
        // causes deprecation warning on modern browsers
        var evt = window.document.createEvent('UIEvents')
        evt.initUIEvent('resize', true, false, window, 0)
        window.dispatchEvent(evt)
    }
  })
}
  • URL: /components/raw/uol-section-nav/section-nav.module.js
  • Filesystem Path: src/library/02-components/section-nav/section-nav.module.js
  • Size: 5.6 KB 
{
  "section_nav": {
    "title": "Undergraduate",
    "items": [
      {
        "title": "Overview",
        "url": "/overview"
      },
      {
        "title": "Academic experience",
        "url": "/academic experience",
        "items": [
          {
            "title": "Learning and teaching",
            "url": "/learning_and_teaching"
          },
          {
            "title": "Academic facilities",
            "url": "/academic_facilities"
          }
        ]
      },
      {
        "title": "Enrichment opportunities",
        "url": "/enrichment_opportunities",
        "items": [
          {
            "title": "Study abroad",
            "url": "/study_abroad"
          },
          {
            "title": "Work experience",
            "url": "/work_experience"
          },
          {
            "title": "Clubs and societies",
            "url": "/clubs_and_societies"
          },
          {
            "title": "Student enterprise",
            "url": "/student_enterprise"
          }
        ]
      },
      {
        "title": "Your future",
        "url": "/your_future",
        "items": [
          {
            "title": "Careers",
            "url": "/careers"
          },
          {
            "title": "Leeds for Life",
            "url": "/leeds_for_life"
          }
        ]
      },
      {
        "title": "Campus life",
        "url": "/campus_life",
        "items": [
          {
            "title": "City life",
            "url": "/city_life",
            "items": [
              {
                "title": "City life overview",
                "url": "/city_life/overview"
              }
            ]
          },
          {
            "title": "Wellbeing and support",
            "url": "/wellbeing_and_support"
          },
          {
            "title": "Sport and fitness",
            "url": "/sport_and_fitness"
          },
          {
            "title": "A global university",
            "url": "/a_global_university"
          }
        ]
      },
      {
        "title": "Fees and costs",
        "url": "/fees_and_costs",
        "items": [
          {
            "title": "Undergraduate fees",
            "url": "/undergraduate_fees"
          },
          {
            "title": "Additional costs",
            "url": "/additional_costs"
          },
          {
            "title": "Living expenses",
            "url": "/living_expenses"
          },
          {
            "title": "Tuition fee liability",
            "url": "/tuition_fee_liability"
          },
          {
            "title": "Tuition fee payment schedule",
            "url": "/tuition_fee_payment_schedule"
          },
          {
            "title": "How to pay",
            "url": "/how_to_pay"
          },
          {
            "title": "Sponsored students",
            "url": "/sponsored_students"
          },
          {
            "title": "Paying for your accommodation",
            "url": "/paying_for_your_accommodation"
          }
        ]
      },
      {
        "title": "Funding",
        "url": "/funding",
        "items": [
          {
            "title": "Funding overview",
            "url": "/funding"
          },
          {
            "title": "University scholarships and funding",
            "url": "/university_scholarships_and_funding",
            "items": [
              {
                "title": "Leeds financial support",
                "url": "/leeds_financial_support",
                "items": [
                  {
                    "title": "Leeds financial support eligibility",
                    "url": "/leeds_financial_support_eligibility"
                  },
                  {
                    "title": "How much is it worth?",
                    "url": "/how_much_is_it_worth"
                  },
                  {
                    "title": "Choosing your support",
                    "url": "/choosing_your_support"
                  }
                ]
              },
              {
                "title": "Scholarships | personal circumstances",
                "url": "/scholarships_personal_circumstances",
                "items": [
                  {
                    "title": "Scholarships",
                    "url": "/scholarships_personal_circumstances/scholarships"
                  },
                  {
                    "title": "Scholarships FAQs",
                    "url": "/scholarships_personal_circumstances/scholarships_faqs"
                  }
                ]
              },
              {
                "title": "Scholarships | academic achievement",
                "url": "/scholarships_academic_achievement"
              }
            ]
          },
          {
            "title": "Student loans and bursaries",
            "url": "student_loans_and_bursaries",
            "items": [
              {
                "title": "What help is available?",
                "url": "/what_help_is_available"
              },
              {
                "title": "Eligibility and applications",
                "url": "/eligibility_and_applications"
              },
              {
                "title": "Tuition fee loans for new part-time students",
                "url": "/tuition_fee_loans_for_new_part-time_students"
              },
              {
                "title": "NHS funding",
                "url": "/nhs_funding"
              },
              {
                "title": "Financial support for Muslim students",
                "url": "/financial_support_for_muslim_students"
              }
            ]
          },
          {
            "title": "International funding",
            "url": "/international_funding"
          },
          {
            "title": "Government part-time maintenance loans",
            "url": "/government_part-time_maintenance_loans"
          },
          {
            "title": "Extra financial help",
            "url": "/extra_financial_help"
          },
          {
            "title": "Funds available after you arrive",
            "url": "/funds_available_after_you_arrive"
          }
        ]
      },
      {
        "title": "Applying",
        "url": "/applying",
        "items": [
          {
            "title": "How to apply",
            "url": "/how_to_apply"
          },
          {
            "title": "Accepted qualifications",
            "url": "/accepted_qualifications"
          },
          {
            "title": "Application timetable",
            "url": "/application_timetable"
          },
          {
            "title": "Writing your personal statement",
            "url": "/writing_your_personal_statement"
          },
          {
            "title": "Alternative admissions",
            "url": "/alternative_admissions"
          },
          {
            "title": "Care leavers and estranged students",
            "url": "/care_leavers_and_estranged_students"
          },
          {
            "title": "Applying FAQs",
            "url": "/applying_faqs"
          },
          {
            "title": "Transparency data",
            "url": "/transparency_data"
          },
          {
            "title": "Degree outcomes statement",
            "url": "/degree_outcomes_statement"
          },
          {
            "title": "Declaring criminal convictions",
            "url": "/declaring_criminal_convictions"
          }
        ]
      },
      {
        "title": "Types of course",
        "url": "/types_of_course",
        "items": [
          {
            "title": "Part-time and mature students",
            "url": "/part-time_and_mature_students"
          },
          {
            "title": "Joint honours",
            "url": "/joint_honours"
          },
          {
            "title": "Foundation courses",
            "url": "/foundation_courses"
          },
          {
            "title": "Intercalating and Integrated Masters",
            "url": "/intercalating_and_integrated_masters"
          }
        ]
      },
      {
        "title": "Teachers and advisors",
        "url": "/teachers_and_advisors",
        "items": [
          {
            "title": "Teachers and advisors overview",
            "url": "/teachers_and_advisors"
          },
          {
            "title": "Supporting students",
            "url": "HE talks and workshops",
            "items": [
              {
                "title": "HE talks and workshops",
                "url": "/he_talks_and_workshops"
              },
              {
                "title": "Subject-specific outreach",
                "url": "/subject-specific_outreach"
              },
              {
                "title": "Online courses for schools",
                "url": "/online_courses_for_schools"
              },
              {
                "title": "Live webinars for schools and colleges",
                "url": "/live_webinars_for_schools_and_colleges"
              },
              {
                "title": "Research and study skills",
                "url": "/research_and_study_skills"
              },
              {
                "title": "Alternative admissions",
                "url": "/alternative_admissions"
              }
            ]
          },
          {
            "title": "Supporting teachers and advisors",
            "url": "/supporting_teachers_and_advisors",
            "items": [
              {
                "title": "Teachers and advisors CPD webinars",
                "url": "/teachers_and_advisors_cpd_webinars"
              },
              {
                "title": "Talks in schools",
                "url": "/talks_in_schools"
              },
              {
                "title": "IntoUniversity",
                "url": "/intouniversity"
              },
              {
                "title": "Students into schools",
                "url": "/students_into_schools"
              },
              {
                "title": "EPQ Virtual Conference",
                "url": "/epq_virtual_conference"
              }
            ]
          }
        ]
      },
      {
        "title": "Parents and carers",
        "url": "/parents_and_carers",
        "items": [
          {
            "title": "Supporting your son or daughter",
            "url": "/supporting_your_son_or_daughter"
          },
          {
            "title": "Tips for parents",
            "url": "/tips_for_parents"
          },
          {
            "title": "Parents FAQs",
            "url": "/parents_faqs"
          }
        ]
      }
    ]
  }
}