6.4.1 Example (With toggle) View in a new window

Click the magnifying glass icon to show the search dialog menu, as it appears on the site.

Twig: components/site-search/site-search-complete.twig

Example
Markup
<button class="site-search__toggle" id="site-search-dialog-toggle">Open dialog</button>
{% embed '@uts_theme/components/dialog/dialog.twig' with {classes: 'js-dialog site-search', toggle: 'site-search-dialog-toggle', label: 'Dialog'} %}
  {% block content %}
    <div class="tab-list js-tab-list">
      <div class="tab-list__tab-wrapper">
        <ul class="tab-list__list">
          <li>
            <a href="#searchSite" class="tab-list__tab">Search entire site</a>
          </li>
          <li>
            <a href="#searchCourse" class="tab-list__tab">Search for a course</a>
          </li>
          <li>
            <a href="#browseStudyAreas" class="tab-list__tab site-search__browse-toggle">Browse study areas</a>
          </li>
        </ul>
      </div>

      <section class="tab-list__panel" id="searchSite">
        <input type="search" class="site-search__input-jumbo" placeholder="Search" autofocus>
      </section>

      <section class="tab-list__panel" id="searchCourse">
        <input type="text" class="site-search__input-jumbo" placeholder="Search" value="Design" autofocus>
        <ul class="site-search__results ui-autocomplete ui-front ui-menu ui-widget ui-widget-content">
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#" class="ui-autocomplete__heading">Design, architecture and buiding</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Design in Architecture</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#" class="ui-autocomplete__heading">Creative intelligence and innovation</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Design in Architecture Bachelor of Creative Intelligence And Innovation</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Forecisic Science Bachelor of Creative Intelligence And Innovation</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Science Bachelor of Creative Intelligence And Innovation</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#" class="ui-autocomplete__heading">Science</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Environmental Biology</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Forecisic Science</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#">Bachelor of Forensic Science Bachelor of Arts in In International Studies</a>
            </div>
          </li>
          <li class="ui-menu-item">
            <div class="search-api-autocomplete-suggestion">
              <a href="#" class="ui-autocomplete__more-link">See all 137 results</a>
            </div>
          </li>
        </ul>
      </section>

      <section class="tab-list__panel" id="browseStudyAreas">
        <div class="site-search__browse">
          <div class="site-search__category">
            <h3><a href="#">Analytics & Data Science</a></h3>
            <ul>
              <li><a href="#">Postgraduate</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Business</a></a></h3>
            <ul>
              <li><a href="#">Accounting</a></li>
              <li><a href="#">Economics</a></li>
              <li><a href="#">Finance</a></li>
              <li><a href="#">Management</a></li>
              <li><a href="#">Marketing</a></li>
              <li><a href="#">MBA Programs</a></li>
              <li><a href="#">Postgraduate Programs</a></li>
              <li><a href="#">Research Programs</a></li>
              <li><a href="#">Undergraduate Programs</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Communication</a></h3>
            <ul>
              <li><a href="#">Undergraduate Programs</a></li>
              <li><a href="#">Sports Media</a></li>
              <li><a href="#">Digital and Social Media</a></li>
              <li><a href="#">Digital Information Management</a></li>
              <li><a href="#">Journalism</a></li>
              <li><a href="#">Media Arts and Production</a></li>
              <li><a href="#">Public Communication</a></li>
              <li><a href="#">Social and Political Sciences</a></li>
              <li><a href="#">Music and Sound Design</a></li>
              <li><a href="#">Writing</a></li>
              <li><a href="#">Postgraduate Research Degrees</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Creative Intelligence and Innovation</a></h3>
            <ul>
              <li><a href="#">Creative Intelligence and Innovation</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Design, Architecture and Building</a></h3>
            <ul>
              <li><a href="#">Design</a></li>
              <li><a href="#">Design Innovation</a></li>
              <li><a href="#">Architecture</a></li>
              <li><a href="#">Built Environment</a></li>
              <li><a href="#">DAB Research</a></li>
              <li><a href="#">Local Government</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Education</a></h3>
            <ul>
              <li><a href="#">Master of Education</a></li>
              <li><a href="#">Primary Education</a></li>
              <li><a href="#">Secondary Education</a></li>
              <li><a href="#">TESOL</a></li>
              <li><a href="#">Postgraduate Research Degrees</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Engineering</a></h3>
            <ul>
              <li><a href="#">Undergraduate courses</a></li>
              <li><a href="#">Postgraduate courses</a></li>
              <li><a href="#">Biomedical</a></li>
              <li><a href="#">Civil and Environmental</a></li>
              <li><a href="#">Computer Systems and Software</a></li>
              <li><a href="#">Electrical</a></li>
              <li><a href="#">Engineering Management</a></li>
              <li><a href="#">Mechanical and Mechatronic</a></li>
              <li><a href="#">Systems and Operations</a></li>
              <li><a href="#">Telecommunications</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Health</a></h3>
            <ul>
              <li><a href="#">Nursing (Undergraduate)</a></li>
              <li><a href="#">Nursing (Postgraduate)</a></li>
              <li><a href="#">Midwifery</a></li>
              <li><a href="#">Sport and Exercise</a></li>
              <li><a href="#">Public Health</a></li>
              <li><a href="#">Health Science</a></li>
              <li><a href="#">Health Services Management</a></li>
              <li><a href="#">Health Policy</a></li>
              <li><a href="#">Health (Postgraduate)</a></li>
              <li><a href="#">Research and Honours</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Health (GEM)</a></h3>
            <ul>
              <li><a href="#">Physiotherapy</a></li>
              <li><a href="#">Orthoptics</a></li>
              <li><a href="#">Clinical Psychology</a></li>
              <li><a href="#">Pharmacy</a></li>
              <li><a href="#">Good Manufacturing Practice</a></li>
              <li><a href="#">Pharmaceutical Science</a></li>
              <li><a href="#">Health Policy</a></li>
              <li><a href="#">Coursework Degrees</a></li>
              <li><a href="#">Research Degrees</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Information Technology</a></h3>
            <ul>
              <li><a href="#">Undergraduate courses</a></li>
              <li><a href="#">Postgraduate courses</a></li>
              <li><a href="#">Business Analysis and Information Systems</a></li>
              <li><a href="#">Computer Science, Data Analytics/Mining</a></li>
              <li><a href="#">Games, Graphics and Multimedia</a></li>
              <li><a href="#">IT Management and Leadership</a></li>
              <li><a href="#">Networking and Security</a></li>
              <li><a href="#">Software Development and Programming</a></li>
              <li><a href="#">Systems Design and Analysis</a></li>
              <li><a href="#">Web and Cloud Computing</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">International Studies</a></h3>
            <ul>
              <li><a href="#">Global Studies</a></li>
              <li><a href="#">International Studies</a></li>
              <li><a href="#">Languages</a></li>
              <li><a href="#">Postgraduate Research Degrees</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Law</a></h3>
            <ul>
              <li><a href="#">Undergraduate Law Programs</a></li>
              <li><a href="#">Juris Doctor</a></li>
              <li><a href="#">Legal Studies</a></li>
              <li><a href="#">Practical Legal Training</a></li>
              <li><a href="#">Intellectual Property</a></li>
              <li><a href="#">Dispute Resolution</a></li>
              <li><a href="#">Master of Laws</a></li>
              <li><a href="#">Higher Degree Research</a></li>
              <li><a href="#">Overseas Practitioner Programs</a></li>
              <li><a href="#">Postgraduate Law Programs</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Science</a></h3>
            <ul>
              <li><a href="#">Undergraduate Programs</a></li>
              <li><a href="#">Postgraduate Programs</a></li>
              <li><a href="#">Research Programs</a></li>
              <li><a href="#">Life Sciences</a></li>
              <li><a href="#">Mathematical and Physical Sciences</a></li>
            </ul>
          </div>
          <div class="site-search__category">
            <h3><a href="#">Transdisciplinary Innovation</a></h3>
            <ul>
              <li><a href="#">UTS Animal Logic Academy</a></li>
              <li><a href="#">Creative Intelligence and Innovation</a></li>
              <li><a href="#">Transdisciplinary Innovation</a></li>
            </ul>
          </div>
        </div>
      </section>
    </div>
  {% endblock %}
{% endembed %}