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 %}
        <span class="header--link header--link__menu" menu="menu{{ optionCount }}">{{ mainOption.title }}</span>
        {% 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" onClick="optionsButtonClicked()">
        <div></div><div></div><div></div>
      </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 }}</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 id="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">

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

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

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

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

            <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" onClick="optionsButtonClicked()">
                <div></div>
                <div></div>
                <div></div>
            </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</a>

                <a href="#" class="header--link header--menu-item header--menu-item__category" menu="menu0-2">Masters</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 header--menu-item__category" menu="menu0-5">Online courses</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 class="header--subtitle">Course search options</div>

                </div>

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

                    <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">
                    <div class="header--subtitle">Masters options</div>

                    <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-3" class="header--sub-options">
                    <div class="header--subtitle">Research degrees options</div>

                </div>

                <div id="menu0-4" class="header--sub-options">
                    <div class="header--subtitle">International students options</div>

                </div>

                <div id="menu0-5" class="header--sub-options">
                    <div class="header--subtitle">Online courses options</div>

                    <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-6" class="header--sub-options">
                    <div class="header--subtitle">Foundation courses options</div>

                </div>

                <div id="menu0-7" class="header--sub-options">
                    <div class="header--subtitle">Mature students options</div>

                </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 class="header--subtitle">Arts, Humanities and Cultures options</div>

                </div>

                <div id="menu1-1" class="header--sub-options">
                    <div class="header--subtitle">Biological Sciences options</div>

                </div>

                <div id="menu1-2" class="header--sub-options">
                    <div class="header--subtitle">Business School options</div>

                </div>

                <div id="menu1-3" class="header--sub-options">
                    <div class="header--subtitle">Engineering and Physical Sciences options</div>

                </div>

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

                </div>

                <div id="menu1-5" class="header--sub-options">
                    <div class="header--subtitle">Medicine and Health options</div>

                </div>

                <div id="menu1-6" class="header--sub-options">
                    <div class="header--subtitle">Social Sciences options</div>

                </div>

                <div id="menu1-7" class="header--sub-options">
                    <div class="header--subtitle">Faculty contacts options</div>

                </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 class="header--subtitle">Research overview options</div>

                </div>

                <div id="menu2-1" class="header--sub-options">
                    <div class="header--subtitle">Research excellence and impact options</div>

                </div>

                <div id="menu2-2" class="header--sub-options">
                    <div class="header--subtitle">Strategy and environment options</div>

                </div>

                <div id="menu2-3" class="header--sub-options">
                    <div class="header--subtitle">Researcher and staff development options</div>

                </div>

                <div id="menu2-4" class="header--sub-options">
                    <div class="header--subtitle">Public engagement options</div>

                </div>

                <div id="menu2-5" class="header--sub-options">
                    <div class="header--subtitle">Research and innovation contacts options</div>

                </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 class="header--subtitle">Campus map options</div>

                </div>

                <div id="menu3-1" class="header--sub-options">
                    <div class="header--subtitle">Our history options</div>

                </div>

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

                </div>

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

                </div>

                <div id="menu3-4" class="header--sub-options">
                    <div class="header--subtitle">Reports, accounts and policies options</div>

                </div>

                <div id="menu3-5" class="header--sub-options">
                    <div class="header--subtitle">Strategies and values options</div>

                </div>

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

                </div>

                <div id="menu3-7" class="header--sub-options">
                    <div class="header--subtitle">Executive team options</div>

                </div>

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

                </div>

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

                </div>

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

    <div id="ds2-header--mask-site"></div>
</header>
  • Content: 
    $ds2FullSiteWidth: 1400px;
$headerBgColour: #1f1f1f;
$headerFgColour: #fff;
$headerFadedColour: #999;
$menuBottomBorderColour: #333;
/*
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 {  
  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: 17px;
      cursor: pointer;
      color: $headerFgColour;
      padding: 12px 0;
      display: block;
      box-sizing: border-box;
    }

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

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

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

    .header--burger {
      background: none;
      width: 20px;
      cursor: pointer;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      padding: 16px;

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

      div {
        display: block;
        height: 2px;
        width: 100%;
        margin: 3px 0;
        background: $headerFgColour;
      }
    }

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

    .header--dropdown-inner {
      max-width: $ds2FullSiteWidth;
      margin: auto;
      position: relative;
      padding: 0 16px 48px;
      display: flex;
    }
  
    .header--title {
      font-size: 24px;
      color: $headerFgColour;
      padding: 12px 0;
    }

    .header--subtitle {
      font-size: 17px;
      color: $headerFadedColour;
      padding: 12px 0;
    }

    .header--menu-column {
      margin-right: 64px;
      width: 330px;
    }

    .header--menu-item__category::after {
      content: " \276F";
    }

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

    .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;

        &: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));
  position: absolute;
}
  • 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: 3.4 KB
  • Content: 
    export const ds2TopNav = () => {
  const siteFade = document.getElementById("ds2-header--mask-site");
  const topNavMenus = document.querySelectorAll('.header--link__menu');

  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.getElementsByClassName("header--dropdown-content");
      menus.forEach( ( menu ) => {
        menu.style.display = "none";
      }); 

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

      // 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;
      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") {
        console.log("search");
        let searchInput = document.getElementsByClassName("header--input")[0];
        console.log(searchInput);
        searchInput.focus();
      }
    }
  }); 
 
  siteFade.addEventListener("mouseover", closeMenus);

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

    // hide all sub menu items
    let subMenus = document.getElementsByClassName("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.getElementsByClassName("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";
      }
    }
  });   
}
  • 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: 2.6 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": "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": "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": "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"
        }
      ]
    }
  ]
}