University of Leeds Design System v1.0.21

DS 2 Top Nav

No notes defined.

<header class="ds2-header">
  <div class="header--inner">
    <a class="header--logo-container" href="https://www.leeds.ac.uk/">
      <svg class="header--logo" version="1.1" id="Online" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1923 261.2" style="enable-background:new 0 0 1923 261.2;" xml:space="preserve">
        <style type="text/css"></style>
        <g id="Online_00000020373721803601593220000010652832729662727574_">
          <path class="st0 uol-logo--inline__text" d="M1851.2,174c7.6,5,18.4,9.8,33.4,9.8c22,0,38.4-12.2,38.4-31.6c0-33-45.2-30.6-45.2-48.6
            c0-6.2,6.2-9.6,13.8-9.6c8.8,0,16.2,3,25,7.8l0.4-19c-6-3.6-15.4-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.4,18.6
            c13,14.4,38.4,16.8,38.4,30.6c0,8-8.6,10.6-16.4,10.6c-9.4,0-17.4-3.8-24-8L1851.2,174z M1769.6,164.2V95.8h13.4
            c21.4,0,34.6,13.2,34.6,34.2c0,20.6-13.2,34.2-34.6,34.2H1769.6z M1748,182.4h34.6c34,0,57.6-21.6,57.6-53
            c0-30.8-21.6-51.6-57.2-51.6h-35V182.4z M1666.4,182.4h60.6v-18h-39V138h33.6v-18.2H1688V95.6h38.8V77.8h-60.4V182.4z
            M1584.8,182.4h60.6v-18h-39V138h33.4v-18.2h-33.4V95.6h38.6V77.8h-60.2V182.4z M1509.4,182.4h58.4v-18h-36.6V77.8h-21.8V182.4z
            M1401,182.4h21.8v-44h32.4v-18h-32.4V95.6h38V77.8H1401V182.4z M1292.6,130c0-21.6,14.2-35.8,33-35.8s33.2,14.2,33.2,35.8
            c0,21.8-14.4,35.8-33.2,35.8S1292.6,151.8,1292.6,130 M1269.8,130c0,31,24,53.8,55.8,53.8c32,0,55.8-22.8,55.8-53.8
            s-23.8-53.8-55.8-53.8C1293.8,76.2,1269.8,99,1269.8,130 M1142.8,77.8l36.4,63.2v41.4h21.8v-41.2l36-63.4h-22.6l-16,29.4
            c-2.4,4.4-5.4,10-7.6,14.8h-0.2c-2.4-4.8-5.2-10.6-7.8-15l-16-29.2H1142.8z M1047.8,95.6h31.4v86.8h21.6V95.6h31.4V77.8h-84.4V95.6
            z M1007.6,182.4h21.6V77.8h-21.6V182.4z M915.2,174c7.4,5,18.2,9.8,33.2,9.8c22.4,0,38.4-11.6,38.4-31.6c0-32.4-45.2-31-45.2-48.6
            c0-6.2,6.2-9.6,14-9.6c8.6,0,16,3,25,7.8l0.2-19c-5.8-3.6-15.2-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.6,18.6
            c12.8,14.4,38.2,16.8,38.2,30.6c0,8-8.4,10.6-16.4,10.6c-9.4,0-17.2-3.8-24-8L915.2,174z M847.4,126V95.6h9.2
            c10.4,0,16.2,6.2,16.2,14.4c0,9-7,16-16.2,16H847.4z M825.6,182.4h21.8V142h8.2c3.6,1.4,10,13.2,26,40.4h24.8
            c-15.8-26.8-25.8-44.4-31.2-47.4v-0.2c9.6-4.4,19-13.4,19-27c0-16.2-10.2-30-38-30h-30.6V182.4z M744,182.4h60.8v-18h-39V138h33.4
            v-18.2h-33.4V95.6h38.6V77.8H744V182.4z M624,77.8l43.4,105.4h17.4l44.6-105.4h-22.2l-22.8,55.8c-2.8,6.6-5,13.2-7.2,19.4h-0.4
            c-2-6.2-4.4-12.6-7-19.4l-22-55.8H624z M587.6,182.4h21.6V77.8h-21.6V182.4z M465,182.4h21.4V125c0-4.8,0-11.2-0.4-14.6h0.4
            c3,4.6,6,8.6,10,13.8l45.4,58.2H562V77.8h-21.4V131c0,4.4,0,11.4,0.2,16.4h-0.2c-3-4.4-5.8-8.6-10-13.8l-44-55.8H465V182.4z
            M351.2,141.6c0,27.6,15.4,42.2,44.6,42.2c28,0,45.6-14.2,45.6-42.6V77.8h-21.8V141c0,16.2-8,24.6-23.4,24.6
            c-14.6,0-23.2-8.8-23.2-24.6V77.8h-21.8V141.6z"></path>
          <g>
            <polygon class="st0" points="142,168.4 146.6,168.4 146.6,126.8 156.8,126.8 156.8,119.2 142,119.2"></polygon>
            <polygon class="st0" points="162.4,168.4 167,168.4 167,126.8 177.2,126.8 177.2,119.2 162.4,119.2"></polygon>
            <polygon class="st0" points="169,83.4 173.2,83.4 173.2,79.6 166.4,79.6 166.4,91 169,91"></polygon>
            <polygon class="st0" points="157,83.4 161.2,83.4 161.2,79.6 154.4,79.6 154.4,91 157,91"></polygon>
            <polygon class="st0" points="182.8,168.4 187.4,168.4 187.4,126.8 197.6,126.8 197.6,119.2 182.8,119.2"></polygon>
            <path class="st0" d="M184.2,206.3c0-8.4-6.6-14.2-14.4-14.2s-14.4,5.8-14.4,14.2c0,8.4,6.6,14.2,14.4,14.2
              S184.2,214.7,184.2,206.3z M160.8,206.3c0-5.4,4.2-9,9-9s9,3.6,9,9c0,5.4-4.2,9-9,9S160.8,211.7,160.8,206.3z"></path>
            <polygon class="st0" points="137.2,112.2 202.4,112.2 205.2,108 134.4,108"></polygon>
            <path class="st0" d="M0,0.1v261h114.2V192H142v69.1h4.6v-77.7H193v77.7h4.6V192h27.8v69.1H261V0.1H0z M169.6,30.1h0.4l26.8,16.4
              h-54L169.6,30.1z M142.4,49.7h54.8l2.8,19.8h-60.4L142.4,49.7z M219.6,187.4h-22v-8.6H142v8.6h-22v-19.2h3.8v-62.8h6V72.8h80v32.6
              h6v62.8h3.8V187.4z"></path>
            <polygon class="st0" points="181,83.4 185.2,83.4 185.2,79.6 178.4,79.6 178.4,91 181,91"></polygon>
          </g>
        </g>
      </svg>
    </a> 
    <nav class="header--right">
      {# Loop through options assiging (eg) 'menu3' to menu attribute #}
      {% set optionCount = 0 %}
      {% for mainOption in mainOptions %}
        <div class="header--link header--link__menu" menu="menu{{ optionCount }}">
          <span class="">{{ mainOption.title }}</span>
          <span class="header--link--arrow"></span>
        </div>
        
        {% set optionCount = optionCount + 1 %}
      {% endfor %}
      
      <button class="header--search header--link__menu" menu="menuSearch" type="submit">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
          <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
        </svg>
        <span class="hide-accessible">Search all leeds.ac.uk</span>
      </button>
      
      <div class="header--burger">
        <a class="header--burger-inner" href="#"><i>Options</i></a>
      </div>

      

    </nav>
  </div>
  <div id="menuSearch" class="header--dropdown-content">
    <div class="header--dropdown-inner">
      <div class="header--menu-column">
        <div class="header--search-input">
          <button class="header--dropdown--search"  type="submit">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
              <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
            </svg>
            <span class="hide-accessible"></span>
          </button>
          <input placeholder="Search all leeds.ac.uk" aria-label="Search all leeds.ac.uk" autocorrect="off" autocapitalize="off" autocomplete="off" class="header--input">
          
        </div>
        {# To do. Add these links in config #}
        <div class="header--subtitle">Quick links</div>
        <a href="#" class="header--link">Course search</a>
        <a href="#" class="header--link">Open days</a> 
        <a href="#" class="header--link">University news</a>
        <a href="#" class="header--link">Undergraduate finance</a>
      </div>
    </div>
  </div>
  
  {# Create mega menus underneath header bar which are revealed on header bar item hover #}
  {% set optionCount = 0 %}
  {% for mainOption in mainOptions %}
    
    <div id="menu{{ optionCount }}" class="header--dropdown-content">
      <div class="header--dropdown-inner">
        <div class="header--menu-column">
          <div class="header--title">{{ mainOption.longTitle }}</div>
          {{ mainOption.description | safe }}
        </div>
        <div class="header--menu-column">
          <div class="header--subtitle">{{ mainOption.title }} options</div>
          {% set subOptionCount = 0 %}
          {% for subOption in mainOption.subOptions %}
            <a href="#" class="header--link header--menu-item {% if subOption.secondOptions %}header--menu-item__category{% endif %}" {% if subOption.secondOptions %}menu="menu{{ optionCount }}-{{ subOptionCount }}"{% endif %}>{{ subOption.name }}{% if subOption.secondOptions %}<div class="arrow"></div>{% endif %}</a>
            {% set subOptionCount = subOptionCount + 1 %}
          {% endfor %}
        </div>
        <div class="header--menu-column">
          {% set subOptionCount = 0 %}
          {% for subOption in mainOption.subOptions %}
            <div id="menu{{ optionCount }}-{{ subOptionCount }}" class="header--sub-options">
              {# <div class="header--subtitle">{{ subOption.name }} options</div> #}
              {% for secondOption in subOption.secondOptions %}
                <a href="#" class="header--link">{{ secondOption.name }}</a>
              {% endfor %}
            </div>
            {% set subOptionCount = subOptionCount + 1 %}
          {% endfor %}
        </div> 
      </div>
    </div>
    {% set optionCount = optionCount + 1 %}
  {% endfor %}
  <div class="ds2-header--mask-site"></div>
</header>
 
<header class="ds2-header">
    <div class="header--inner">
        <a class="header--logo-container" href="https://www.leeds.ac.uk/">
            <svg class="header--logo" version="1.1" id="Online" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1923 261.2" style="enable-background:new 0 0 1923 261.2;" xml:space="preserve">
                <style type="text/css"></style>
                <g id="Online_00000020373721803601593220000010652832729662727574_">
                    <path class="st0 uol-logo--inline__text" d="M1851.2,174c7.6,5,18.4,9.8,33.4,9.8c22,0,38.4-12.2,38.4-31.6c0-33-45.2-30.6-45.2-48.6
            c0-6.2,6.2-9.6,13.8-9.6c8.8,0,16.2,3,25,7.8l0.4-19c-6-3.6-15.4-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.4,18.6
            c13,14.4,38.4,16.8,38.4,30.6c0,8-8.6,10.6-16.4,10.6c-9.4,0-17.4-3.8-24-8L1851.2,174z M1769.6,164.2V95.8h13.4
            c21.4,0,34.6,13.2,34.6,34.2c0,20.6-13.2,34.2-34.6,34.2H1769.6z M1748,182.4h34.6c34,0,57.6-21.6,57.6-53
            c0-30.8-21.6-51.6-57.2-51.6h-35V182.4z M1666.4,182.4h60.6v-18h-39V138h33.6v-18.2H1688V95.6h38.8V77.8h-60.4V182.4z
            M1584.8,182.4h60.6v-18h-39V138h33.4v-18.2h-33.4V95.6h38.6V77.8h-60.2V182.4z M1509.4,182.4h58.4v-18h-36.6V77.8h-21.8V182.4z
            M1401,182.4h21.8v-44h32.4v-18h-32.4V95.6h38V77.8H1401V182.4z M1292.6,130c0-21.6,14.2-35.8,33-35.8s33.2,14.2,33.2,35.8
            c0,21.8-14.4,35.8-33.2,35.8S1292.6,151.8,1292.6,130 M1269.8,130c0,31,24,53.8,55.8,53.8c32,0,55.8-22.8,55.8-53.8
            s-23.8-53.8-55.8-53.8C1293.8,76.2,1269.8,99,1269.8,130 M1142.8,77.8l36.4,63.2v41.4h21.8v-41.2l36-63.4h-22.6l-16,29.4
            c-2.4,4.4-5.4,10-7.6,14.8h-0.2c-2.4-4.8-5.2-10.6-7.8-15l-16-29.2H1142.8z M1047.8,95.6h31.4v86.8h21.6V95.6h31.4V77.8h-84.4V95.6
            z M1007.6,182.4h21.6V77.8h-21.6V182.4z M915.2,174c7.4,5,18.2,9.8,33.2,9.8c22.4,0,38.4-11.6,38.4-31.6c0-32.4-45.2-31-45.2-48.6
            c0-6.2,6.2-9.6,14-9.6c8.6,0,16,3,25,7.8l0.2-19c-5.8-3.6-15.2-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.6,18.6
            c12.8,14.4,38.2,16.8,38.2,30.6c0,8-8.4,10.6-16.4,10.6c-9.4,0-17.2-3.8-24-8L915.2,174z M847.4,126V95.6h9.2
            c10.4,0,16.2,6.2,16.2,14.4c0,9-7,16-16.2,16H847.4z M825.6,182.4h21.8V142h8.2c3.6,1.4,10,13.2,26,40.4h24.8
            c-15.8-26.8-25.8-44.4-31.2-47.4v-0.2c9.6-4.4,19-13.4,19-27c0-16.2-10.2-30-38-30h-30.6V182.4z M744,182.4h60.8v-18h-39V138h33.4
            v-18.2h-33.4V95.6h38.6V77.8H744V182.4z M624,77.8l43.4,105.4h17.4l44.6-105.4h-22.2l-22.8,55.8c-2.8,6.6-5,13.2-7.2,19.4h-0.4
            c-2-6.2-4.4-12.6-7-19.4l-22-55.8H624z M587.6,182.4h21.6V77.8h-21.6V182.4z M465,182.4h21.4V125c0-4.8,0-11.2-0.4-14.6h0.4
            c3,4.6,6,8.6,10,13.8l45.4,58.2H562V77.8h-21.4V131c0,4.4,0,11.4,0.2,16.4h-0.2c-3-4.4-5.8-8.6-10-13.8l-44-55.8H465V182.4z
            M351.2,141.6c0,27.6,15.4,42.2,44.6,42.2c28,0,45.6-14.2,45.6-42.6V77.8h-21.8V141c0,16.2-8,24.6-23.4,24.6
            c-14.6,0-23.2-8.8-23.2-24.6V77.8h-21.8V141.6z"></path>
                    <g>
                        <polygon class="st0" points="142,168.4 146.6,168.4 146.6,126.8 156.8,126.8 156.8,119.2 142,119.2"></polygon>
                        <polygon class="st0" points="162.4,168.4 167,168.4 167,126.8 177.2,126.8 177.2,119.2 162.4,119.2"></polygon>
                        <polygon class="st0" points="169,83.4 173.2,83.4 173.2,79.6 166.4,79.6 166.4,91 169,91"></polygon>
                        <polygon class="st0" points="157,83.4 161.2,83.4 161.2,79.6 154.4,79.6 154.4,91 157,91"></polygon>
                        <polygon class="st0" points="182.8,168.4 187.4,168.4 187.4,126.8 197.6,126.8 197.6,119.2 182.8,119.2"></polygon>
                        <path class="st0" d="M184.2,206.3c0-8.4-6.6-14.2-14.4-14.2s-14.4,5.8-14.4,14.2c0,8.4,6.6,14.2,14.4,14.2
              S184.2,214.7,184.2,206.3z M160.8,206.3c0-5.4,4.2-9,9-9s9,3.6,9,9c0,5.4-4.2,9-9,9S160.8,211.7,160.8,206.3z"></path>
                        <polygon class="st0" points="137.2,112.2 202.4,112.2 205.2,108 134.4,108"></polygon>
                        <path class="st0" d="M0,0.1v261h114.2V192H142v69.1h4.6v-77.7H193v77.7h4.6V192h27.8v69.1H261V0.1H0z M169.6,30.1h0.4l26.8,16.4
              h-54L169.6,30.1z M142.4,49.7h54.8l2.8,19.8h-60.4L142.4,49.7z M219.6,187.4h-22v-8.6H142v8.6h-22v-19.2h3.8v-62.8h6V72.8h80v32.6
              h6v62.8h3.8V187.4z"></path>
                        <polygon class="st0" points="181,83.4 185.2,83.4 185.2,79.6 178.4,79.6 178.4,91 181,91"></polygon>
                    </g>
                </g>
            </svg>
        </a>
        <nav class="header--right">

            <div class="header--link header--link__menu" menu="menu0">
                <span class="">Study</span>
                <span class="header--link--arrow"></span>
            </div>

            <div class="header--link header--link__menu" menu="menu1">
                <span class="">Faculties</span>
                <span class="header--link--arrow"></span>
            </div>

            <div class="header--link header--link__menu" menu="menu2">
                <span class="">Research</span>
                <span class="header--link--arrow"></span>
            </div>

            <div class="header--link header--link__menu" menu="menu3">
                <span class="">About</span>
                <span class="header--link--arrow"></span>
            </div>

            <button class="header--search header--link__menu" menu="menuSearch" type="submit">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
                    <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
                </svg>
                <span class="hide-accessible">Search all leeds.ac.uk</span>
            </button>

            <div class="header--burger">
                <a class="header--burger-inner" href="#"><i>Options</i></a>
            </div>

        </nav>
    </div>
    <div id="menuSearch" class="header--dropdown-content">
        <div class="header--dropdown-inner">
            <div class="header--menu-column">
                <div class="header--search-input">
                    <button class="header--dropdown--search" type="submit">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
                            <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
                        </svg>
                        <span class="hide-accessible"></span>
                    </button>
                    <input placeholder="Search all leeds.ac.uk" aria-label="Search all leeds.ac.uk" autocorrect="off" autocapitalize="off" autocomplete="off" class="header--input">

                </div>

                <div class="header--subtitle">Quick links</div>
                <a href="#" class="header--link">Course search</a>
                <a href="#" class="header--link">Open days</a>
                <a href="#" class="header--link">University news</a>
                <a href="#" class="header--link">Undergraduate finance</a>
            </div>
        </div>
    </div>

    <div id="menu0" class="header--dropdown-content">
        <div class="header--dropdown-inner">
            <div class="header--menu-column">
                <div class="header--title">Study at Leeds</div>
                <p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p>
                <p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>
            </div>
            <div class="header--menu-column">
                <div class="header--subtitle">Study options</div>

                <a href="#" class="header--link header--menu-item ">Course search</a>

                <a href="#" class="header--link header--menu-item header--menu-item__category" menu="menu0-1">Undergraduate<div class="arrow"></div></a>

                <a href="#" class="header--link header--menu-item header--menu-item__category" menu="menu0-2">Online courses<div class="arrow"></div></a>

                <a href="#" class="header--link header--menu-item header--menu-item__category" menu="menu0-3">Masters<div class="arrow"></div></a>

                <a href="#" class="header--link header--menu-item ">Research degrees</a>

                <a href="#" class="header--link header--menu-item ">International students</a>

                <a href="#" class="header--link header--menu-item ">Foundation courses</a>

                <a href="#" class="header--link header--menu-item ">Mature students</a>

            </div>
            <div class="header--menu-column">

                <div id="menu0-0" class="header--sub-options">

                </div>

                <div id="menu0-1" class="header--sub-options">

                    <a href="#" class="header--link">Undergraduate home page</a>

                    <a href="#" class="header--link">Clearing 2026</a>

                    <a href="#" class="header--link">Undergraduate course search</a>

                    <a href="#" class="header--link">Fees and funding</a>

                    <a href="#" class="header--link">Student life</a>

                </div>

                <div id="menu0-2" class="header--sub-options">

                    <a href="#" class="header--link">Overview</a>

                    <a href="#" class="header--link">Online Masters study</a>

                    <a href="#" class="header--link">Short online courses</a>

                    <a href="#" class="header--link">PhD by distance learning</a>

                </div>

                <div id="menu0-3" class="header--sub-options">

                    <a href="#" class="header--link">Masters home page</a>

                    <a href="#" class="header--link">Postraguate open day</a>

                    <a href="#" class="header--link">Masters course search</a>

                    <a href="#" class="header--link">Applying</a>

                    <a href="#" class="header--link">Fees and funding</a>

                </div>

                <div id="menu0-4" class="header--sub-options">

                </div>

                <div id="menu0-5" class="header--sub-options">

                </div>

                <div id="menu0-6" class="header--sub-options">

                </div>

                <div id="menu0-7" class="header--sub-options">

                </div>

            </div>
        </div>
    </div>

    <div id="menu1" class="header--dropdown-content">
        <div class="header--dropdown-inner">
            <div class="header--menu-column">
                <div class="header--title">University of Leeds faculties</div>
                <p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p>
                <p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>
            </div>
            <div class="header--menu-column">
                <div class="header--subtitle">Faculties options</div>

                <a href="#" class="header--link header--menu-item ">Arts, Humanities and Cultures</a>

                <a href="#" class="header--link header--menu-item ">Biological Sciences</a>

                <a href="#" class="header--link header--menu-item ">Business School</a>

                <a href="#" class="header--link header--menu-item ">Engineering and Physical Sciences</a>

                <a href="#" class="header--link header--menu-item ">Environment</a>

                <a href="#" class="header--link header--menu-item ">Medicine and Health</a>

                <a href="#" class="header--link header--menu-item ">Social Sciences</a>

                <a href="#" class="header--link header--menu-item ">Faculty contacts</a>

            </div>
            <div class="header--menu-column">

                <div id="menu1-0" class="header--sub-options">

                </div>

                <div id="menu1-1" class="header--sub-options">

                </div>

                <div id="menu1-2" class="header--sub-options">

                </div>

                <div id="menu1-3" class="header--sub-options">

                </div>

                <div id="menu1-4" class="header--sub-options">

                </div>

                <div id="menu1-5" class="header--sub-options">

                </div>

                <div id="menu1-6" class="header--sub-options">

                </div>

                <div id="menu1-7" class="header--sub-options">

                </div>

            </div>
        </div>
    </div>

    <div id="menu2" class="header--dropdown-content">
        <div class="header--dropdown-inner">
            <div class="header--menu-column">
                <div class="header--title">Research and Innovation</div>
                <p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p>
                <p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>
            </div>
            <div class="header--menu-column">
                <div class="header--subtitle">Research options</div>

                <a href="#" class="header--link header--menu-item ">Research overview</a>

                <a href="#" class="header--link header--menu-item ">Research excellence and impact</a>

                <a href="#" class="header--link header--menu-item ">Strategy and environment</a>

                <a href="#" class="header--link header--menu-item ">Researcher and staff development</a>

                <a href="#" class="header--link header--menu-item ">Public engagement</a>

                <a href="#" class="header--link header--menu-item ">Research and innovation contacts</a>

            </div>
            <div class="header--menu-column">

                <div id="menu2-0" class="header--sub-options">

                </div>

                <div id="menu2-1" class="header--sub-options">

                </div>

                <div id="menu2-2" class="header--sub-options">

                </div>

                <div id="menu2-3" class="header--sub-options">

                </div>

                <div id="menu2-4" class="header--sub-options">

                </div>

                <div id="menu2-5" class="header--sub-options">

                </div>

            </div>
        </div>
    </div>

    <div id="menu3" class="header--dropdown-content">
        <div class="header--dropdown-inner">
            <div class="header--menu-column">
                <div class="header--title">About University of Leeds</div>
                <p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p>
                <p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>
            </div>
            <div class="header--menu-column">
                <div class="header--subtitle">About options</div>

                <a href="#" class="header--link header--menu-item ">Campus map</a>

                <a href="#" class="header--link header--menu-item ">Our history</a>

                <a href="#" class="header--link header--menu-item ">Faculties</a>

                <a href="#" class="header--link header--menu-item ">Governance</a>

                <a href="#" class="header--link header--menu-item ">Reports, accounts and policies</a>

                <a href="#" class="header--link header--menu-item ">Strategies and values</a>

                <a href="#" class="header--link header--menu-item ">Equality</a>

                <a href="#" class="header--link header--menu-item ">Executive team</a>

                <a href="#" class="header--link header--menu-item ">News</a>

                <a href="#" class="header--link header--menu-item ">Events</a>

            </div>
            <div class="header--menu-column">

                <div id="menu3-0" class="header--sub-options">

                </div>

                <div id="menu3-1" class="header--sub-options">

                </div>

                <div id="menu3-2" class="header--sub-options">

                </div>

                <div id="menu3-3" class="header--sub-options">

                </div>

                <div id="menu3-4" class="header--sub-options">

                </div>

                <div id="menu3-5" class="header--sub-options">

                </div>

                <div id="menu3-6" class="header--sub-options">

                </div>

                <div id="menu3-7" class="header--sub-options">

                </div>

                <div id="menu3-8" class="header--sub-options">

                </div>

                <div id="menu3-9" class="header--sub-options">

                </div>

            </div>
        </div>
    </div>

    <div class="ds2-header--mask-site"></div>
</header>
  • Content: 
    $ds2FullSiteWidth: 1400px;
$headerBgColour: #000;
$headerFgColour: #fff;
$headerLinkHoverColour: #D9FF2E;
$headerFadedColour: #000;
$menuBottomBorderColour: #333;
$arrowHeight: 11px;
$arrowHeadLength: 7.778px;
/*
TODO
move above variable to somewhere not in this component
merge in new colours
replace colours with brand colour names
replace 16px etc with spacing values, are we creating new variables?
*/

.ds2-header {
  font-family: uolInter, Arial, Helvetica, sans-serif;
  background: $headerBgColour;
  color: $headerFgColour;

  .header--inner {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    max-width: $ds2FullSiteWidth;
    margin: auto;
    height: 80px;
    z-index: 3;
    padding: 0 16px;
  }

    .header--logo-container {
      height: 34px;
    }

      .header--logo {
        fill: $headerFgColour;
        height: 34px;
      }

  .header--right {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

    .header--link {
      text-decoration: none;
      font-size: 16px;
      line-height: 24px;
      cursor: pointer;
      color: $headerFgColour;
      padding: 12px 0;
      display: block;
      box-sizing: border-box;

      &:hover {
        color: $headerLinkHoverColour;
      }
    }

      .header--link--arrow {
        margin-top: 4px;
        margin-left: 12px;
        height: 13px;
        position: relative;
        background: white;
        transition: all .4s;
        width: 1px;
        display: flex;
        align-items: center;

        &:after {
          border: solid white;
          border-width: 0 1px 1px 0;
          display: inline-block;
          content: "";
          position: absolute;
          left: -4px;
          bottom: 0px;
          width: 7.778px;
          height: 7.778px;
          z-index: -1;
          transform: rotate(-45deg);
          -webkit-transform: rotate(45deg);
        }
      }

    .header--link__active {
      color: $headerLinkHoverColour;

      .header--link--arrow {
        background: #d9ff2e;
        
        &:after {
          border: solid #d9ff2e;
          border-width: 0 1px 1px 0;
          bottom: 2px;
          transform: rotate(-45deg);
          -webkit-transform: rotate(225deg);
        }
      }
    }

      .header--link__menu {
        display: none;
        padding: 4px 16px;

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

    .header--search {
      display: block;
      margin: 8px;
      fill: $headerFgColour;
      background: $headerBgColour;
      border: none;
    }

    .header--burger {
      position: relative;
      display: inline-block;
      height: 26px;
      width: 26px;
      transition: all ease-out 0.3s;
      cursor: pointer;
      // margin-right: 20px;
      padding: 10px;

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

      .header--burger-inner {
        display: block;
        width: 28px;
        height: 16px;
        position: absolute;

        &:after,
        &:before {
          content: '';
          position: absolute;
          top: 0;
          height: 0;
          border-bottom: 3px solid $headerFgColour;
          width: 100%;
          left: 0px;
          right: 0;
          transition: all ease-out 0.3s;
        }

        &:after {
          top: 100%;
        }

        i {
          display: block;
          text-indent: 100%;
          overflow: hidden;
          white-space: nowrap;
          height: 3px;
          background-color: $headerFgColour;
          width: 100%;
          position: absolute;
          top: 50%;
          // left: 10px;
          transition: all ease-out 0.3s;
        }

        &.header--burger-inner__active {
          &:after {
            transform: rotate(-45deg);
            transform-origin: center;
            top: 50%;
            border-bottom: 3px solid $headerLinkHoverColour;
          }

          &:before {
            transform: rotate(45deg);
            transform-origin: center;
            top: 50%;
            border-bottom: 3px solid $headerLinkHoverColour;
          }

          i {
            opacity: 0;
            background-color: $headerLinkHoverColour;
          }
        }
      }
    }

  .header--dropdown-content {
    display: none;
    position: absolute;
    top: 80px;
    width: 100%;
    // background-color: $headerBgColour;
    background: linear-gradient(180deg, #000 0%, #000 100%);
    // border-bottom: 1px solid $menuBottomBorderColour;
    z-index: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: var(--dropdownContentWidth);
    left: 0;

    // for description. No class name as content editors can add p tags
    p {
      line-height: 150%;
    }
  }

    .header--dropdown-inner {
      width: 100%;
      max-width: $ds2FullSiteWidth;
      margin: auto;
      position: relative;
      padding: 0 16px 48px;
      display: flex;
    }

    .header--title {
      font-family: uolSans, Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: $headerFgColour;
      padding: 12px 0;
    }

    .header--subtitle {
      font-family: uolSans, Arial, Helvetica, sans-serif;
      font-size: 17px;
      color: $headerFadedColour;
      padding: 12px 0;
    }

    .header--menu-column {
      margin-right: 100px;
      width: 300px;
    }

      .header--menu-item__category {
        display: flex;
        align-items: center;
         white-space: nowrap;
        .arrow {
          margin-left: 7px;
          height: 1px;
          position: relative;
          background: #D9FF2E;
          transition: all 0.4s;
          width: 13px;
          display: flex;
          align-items: center;


        }


        &:hover .arrow {
          width: 100%;
        }

        .arrow::after {

          border: solid #D9FF2E;
          border-width: 0 1.5px 1.5px 0;
          display: inline-block;

          content: "";
          position: absolute;
          right: 0px;
          top: -4.1px;
          /* background: #ffffff00;
          background: red; */
          width: $arrowHeadLength;
          height: $arrowHeadLength;
          z-index: -1;
          transform: rotate(-45deg);
          -webkit-transform: rotate(-45deg);
        }

        a:hover .arrow {
          width: 150px;
        }
      }



    .header--sub-options {
      display: none;

      margin-top: 42px;
    }

    .header--dropdown--search {
      fill: $headerFgColour;
      background: $headerBgColour;
      border: none;
    }

      .header--search-input {
        display: flex;
        align-items: center;
        padding: 12px 0 24px;
      }

      .header--input {
        border: none;
        background:$headerBgColour;
        color: $headerFgColour;
        font-size: 20px;
        padding-bottom: 8px;
        width: 100%;

        &:focus {
          outline: none;
        }
      }
}

.ds2-header--mask-site {
  width: 100%;
  z-index: 4;
  // background-image: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0));
  // background: red;
  position: absolute;
}

.header--burger {
  position: relative;
  display: inline-block;
  height: 26px;
  width: 26px;
  transition: all ease-out 0.3s;
  cursor: pointer;
  padding: 10px;

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

  a.header--burger-inner {
    display: block;
    width: 28px;
    height: 16px;
    position: absolute;

    &:after,
    &:before {
      content: '';
      position: absolute;
      top: 0;
      height: 0;
      border-bottom: 3px solid #fff;
      width: 100%;
      left: 0px;
      right: 0;
      transition: all ease-out 0.3s;
    }

    &:after {
      top: 100%;
    }

    i {
      display: block;
      text-indent: 100%;
      overflow: hidden;
      white-space: nowrap;
      height: 3px;
      background-color: #fff;
      width: 100%;
      position: absolute;
      top: 50%;
      // left: 10px;
      transition: all ease-out 0.3s;
    }

    &.header--burger-inner__active {
      &:after {
        transform: rotate(-45deg);
        transform-origin: center;
        top: 50%;
        border-bottom: 3px solid $headerLinkHoverColour;
      }

      &:before {
        transform: rotate(45deg);
        transform-origin: center;
        top: 50%;
        border-bottom: 3px solid $headerLinkHoverColour;
      }

      i {
        opacity: 0;
        background-color: $headerLinkHoverColour;
      }
    }
  }
}
  • URL: /components/raw/ds2-top-nav/_ds2-top-nav.scss
  • Filesystem Path: src/library/02-ds2-components/ds2-top-nav/_ds2-top-nav.scss
  • Size: 8.5 KB
  • Content: 
    export const ds2TopNav = () => {
  const siteFade = document.querySelectorAll(".ds2-header--mask-site")[0];
  const topNavMenus = document.querySelectorAll('.header--link__menu');

  const hamburgerOuter = document.querySelectorAll('.header--burger')[0];
  const hamburgerInner = document.querySelectorAll('.header--burger-inner')[0];
  
  // burger to cross menu toggle
  hamburgerOuter.addEventListener("click", toggleMobileMenu);
  function toggleMobileMenu() {
    hamburgerInner.classList.toggle("header--burger-inner__active");
  }

  if (!siteFade) return;

  topNavMenus.forEach( ( topNavMenu ) => {
    let menuItem = topNavMenu.getAttribute("menu");
    topNavMenu.addEventListener("mouseover", showMenu);
    siteFade.style.display = "none";

    function showMenu() {
      // hide all menu items
      let menus = document.querySelectorAll(".header--dropdown-content");
      menus.forEach( ( menu ) => {
        menu.style.display = "none";
      });

      // remove all active top links
      let activeLinks = document.querySelectorAll(".header--link__active");
      activeLinks.forEach( ( activeLink ) => {
        activeLink.classList.remove("header--link__active");
      }); 

      // show selected menu
      let menu = document.getElementById(menuItem);
      menu.style.display = "block";

      // add class to highlight current top bar item
      topNavMenu.classList.add("header--link__active");

      // siteFade - add alpha block to fade out area under menu
      // work out position and size so fade between bottom of menu and bottom of browser

      const menuBottomYPos = menu.getBoundingClientRect().bottom - 1;
      const browserBottomYPos = window.scrollY + window.innerHeight;
      const siteFadeHeight = (browserBottomYPos - menuBottomYPos) + "px";
      const siteFadeTopYpos = menuBottomYPos + "px"

      siteFade.style.display = "block";
      siteFade.style.top = siteFadeTopYpos;
      siteFade.style.height = siteFadeHeight;

      if (menuItem == "menuSearch") {
        let searchInput = document.querySelectorAll(".header--input")[0];
        searchInput.focus();
      }
    }
  });

  siteFade.addEventListener("mouseover", closeMenus);

  function closeMenus() {
    siteFade.style.display = "none";
    let menus = document.querySelectorAll(".header--dropdown-content");
    menus.forEach( ( menu ) => {
      menu.style.display = "none";
    });

    // hide all sub menu items
    let subMenus = document.querySelectorAll(".header--sub-options");
    subMenus.forEach( ( subMenu ) => {
      subMenu.style.display = "none";
    });
  }

  const subMenus = document.querySelectorAll('.header--menu-item');

  subMenus.forEach( ( subMenu ) => {
    let subMenuItem;
    subMenu.addEventListener("mouseover", showSubMenu);

    function showSubMenu() {
      // hide all sub menu items
      let menus = document.querySelectorAll(".header--sub-options");
      menus.forEach( ( menu ) => {
        menu.style.display = "none";
      });

      // show selected menu
      if (subMenu.hasAttribute("menu")) {
        subMenuItem = subMenu.getAttribute("menu");
        let sub = document.getElementById(subMenuItem);
        sub.style.display = "block";
      }
    }
  });

  // temp so don't keep having to hover when doing CSS
  // document.getElementById("menu0").style.display = "flex";
  // siteFade.style.display = "block";
  // siteFade.style.top = "550px";
  // siteFade.style.bottom = "0";
}
  • URL: /components/raw/ds2-top-nav/ds2-top-nav.module.js
  • Filesystem Path: src/library/02-ds2-components/ds2-top-nav/ds2-top-nav.module.js
  • Size: 3.5 KB 
{
  "mainOptions": [
    {
      "title": "Study",
      "longTitle": "Study at Leeds",
      "description": "<p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p><p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>",
      "type": "Category",
      "subOptions": [
        {
          "name": "Course search",
          "type": "Single link"
        },
        {
          "name": "Undergraduate",
          "type": "Category",
          "secondOptions": [
            {
              "name": "Undergraduate home page",
              "url": "#"
            },
            {
              "name": "Clearing 2026",
              "url": "#"
            },
            {
              "name": "Undergraduate course search",
              "url": "#"
            },
            {
              "name": "Fees and funding",
              "url": "#"
            },
            {
              "name": "Student life",
              "url": "#"
            }
          ]
        },
        {
          "name": "Online courses",
          "type": "Category",
          "secondOptions": [
            {
              "name": "Overview",
              "url": "#"
            },
            {
              "name": "Online Masters study",
              "url": "#"
            },
            {
              "name": "Short online courses",
              "url": "#"
            },
            {
              "name": "PhD by distance learning",
              "url": "#"
            }
          ]
        },
        {
          "name": "Masters",
          "type": "Category",
          "secondOptions": [
            {
              "name": "Masters home page",
              "url": "#"
            },
            {
              "name": "Postraguate open day",
              "url": "#"
            },
            {
              "name": "Masters course search",
              "url": "#"
            },
            {
              "name": "Applying",
              "url": "#"
            },
            {
              "name": "Fees and funding",
              "url": "#"
            }
          ]
        },
        {
          "name": "Research degrees",
          "type": "Single link"
        },
        {
          "name": "International students",
          "type": "Single link"
        },
        {
          "name": "Foundation courses",
          "type": "Single link"
        },
        {
          "name": "Mature students",
          "type": "Single link"
        }
      ]
    },
    {
      "title": "Faculties",
      "longTitle": "University of Leeds faculties",
      "description": "<p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p><p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>",
      "type": "Category",
      "subOptions": [
        {
          "name": "Arts, Humanities and Cultures",
          "type": "Single link"
        },
        {
          "name": "Biological Sciences",
          "type": "Single link"
        },
        {
          "name": "Business School",
          "type": "Single link"
        },
        {
          "name": "Engineering and Physical Sciences",
          "type": "Single link"
        },
        {
          "name": "Environment",
          "type": "Single link"
        },
        {
          "name": "Medicine and Health",
          "type": "Single link"
        },
        {
          "name": "Social Sciences",
          "type": "Single link"
        },
        {
          "name": "Faculty contacts",
          "type": "Single link"
        }
      ]
    },
    {
      "title": "Research",
      "longTitle": "Research and Innovation",
      "description": "<p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p><p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>",
      "type": "Category",
      "subOptions": [
        {
          "name": "Research overview",
          "type": "Single link"
        },
        {
          "name": "Research excellence and impact",
          "type": "Single link"
        },
        {
          "name": "Strategy and environment",
          "type": "Single link"
        },
        {
          "name": "Researcher and staff development",
          "type": "Single link"
        },
        {
          "name": "Public engagement",
          "type": "Single link"
        },
        {
          "name": "Research and innovation contacts",
          "type": "Single link"
        }
      ]
    },
    {
      "title": "About",
      "longTitle": "About University of Leeds",
      "description": "<p>Vestibulum lobortis, mi vel sagittis mollis, odio sapien suscipit purus, et egestas felis augue sed tortor.</p><p>Aenean ultrices egestas justo eget dignissim. Praesent sollicitudin fermentum ornare.</p>",
      "type": "Category",
      "subOptions": [
        {
          "name": "Campus map",
          "type": "Single link"
        },
        {
          "name": "Our history",
          "type": "Single link"
        },
        {
          "name": "Faculties",
          "type": "Single link"
        },
        {
          "name": "Governance",
          "type": "Single link"
        },
        {
          "name": "Reports, accounts and policies",
          "type": "Single link"
        },
        {
          "name": "Strategies and values",
          "type": "Single link"
        },
        {
          "name": "Equality",
          "type": "Single link"
        },
        {
          "name": "Executive team",
          "type": "Single link"
        },
        {
          "name": "News",
          "type": "Single link"
        },
        {
          "name": "Events",
          "type": "Single link"
        }
      ]
    }
  ]
}