Site Header

In progress

Site header provides the logo, search and menu-toggle buttons on mobile width/device. On desktop width it provides the logo, 1st level of menu tree and secondary menu links - which consists of language switcher, search and a donation link. Mobile menu panel is activated by clicking on the menu-toggle (burger) button. The site header is accessible for keyboard usage and screen readers.

# Todo

  • The Site header needs design for tablet size.
  • Search button and language switcher needs design for all widths.

# Example

Notice! The styles of this example is based on predefined browser width related breakpoints. Changing browser width for this example does not give the true representation of the component.

  <div class="site-header-demo-container">
    <hy-site-header
      logo-label="University of Helsinki"
      logo-url="/"
      menu-label="Valikko"
      search-button-label="Search"
      data-site-header-labels='{
          "menu_labels": {"open":"Avaa mobiilimenu","close":"Sulje mobiilimenu","expand":"Avaa alavalikko","return":"Palaa edelliselle tasolle","home":"Etusivu","main":"Päävalikko","front_page":"Etusivu"},
          "search_labels":{"label":"Search","open":"Open search","close":"Close search"},
          "language_labels":{"open":"Open language list","close":"Close language list"}}'
      data-site-search-labels='{
        "search_description": "web pages, study options, people, research groups, etc…",
        "search_placeholder":"What do you want to find…",
        "search_label":"Search",
        "search_close_label":"Exit search",
        "search_tools_label":"Special Search tools"
      }'
      data-search-tools='[
        {"menuLinkId":"4a4242dd7b9a201ad57b943ac904ec39",
        "isExternal":false,
        "label":"People finder",
        "url":"/en/about-us/people",
        "description":""},
        {"menuLinkId":"334decac91a4531f495e88893b190519",
        "isExternal":"external",
        "label":"Degree finder",
        "url":"https://svenska.yle.fi",
        "description":""},
        {"menuLinkId":"60296b1a224d1f5c2a5e29fef4b716c3",
        "isExternal":false,
        "label":"Research groups",
        "url":"/en/tiedekunta/laaketieteellinen-tiedekunta/tutkimus/services-researchers",
        "description":""}
      ]' 
      data-menu-language='[
          {"langCode":"fi","abbr":"fin","label":"Finnish","url":"/fi"},
          {"langCode":"en","abbr":"eng","label":"English","url":"/en","isActive":"true"},
          {"langCode":"sv","abbr":"swe","label":"Swedish","url":"/sv","isDisabled":"true"}
        ]'
      data-menu-donate='[{"url":"#","label":"Support us"}]'
      data-desktop-links='[
        {"menuLinkId":"9a1297e0af8490e7d111de27a809a650",
         "isActive":"false",
         "label":"About us",
         "labelExtra":"About us",
         "url":"https://helsinki.fi",
         "description":"",
         "shortcutsTitle":"Shortcuts",
         "closeButtonTitle":"Close",
         "shortcuts":[
            {"shortcut_title":"Lorem ipsum","shortcut_url":"https://helsinki.fi", "shortcut_is_external":true,"shortcut_aria_label":"Link opens up in a new tab"},
            {"shortcut_title":"Lorem ipsum","shortcut_url":"https://helsinki.fi","shortcut_is_external":false,"shortcut_aria_label":""}
          ],
         "items":[
             {"menuLinkId":"f07001bbe36ffcc5fe13afd516cbc990","label":"Menu Page 2","url":"https://helsinki.fi","description":""},
             {"menuLinkId":"dcf3d24e3ce118fe53632f4c351692d2","label":"Test EN","url":"https://helsinki.fi","description":""}
         ]},
        {"menuLinkId":"494b9cd4d0873b762b7d39cf4e3ea594",
         "isActive":"true",
         "label":"Admissions and education",
         "labelExtra":"Admissions and education",
         "url":"https://helsinki.fi",
         "description":"",
         "shortcutsTitle":"Shortcuts",
         "closeButtonTitle":"Close",
         "shortcuts":[
            {"shortcut_title":"Lorem ipsum","shortcut_url":"https://helsinki.fi", "shortcut_is_external":true,"shortcut_aria_label":"Link opens up in a new tab"},
            {"shortcut_title":"Lorem ipsum","shortcut_url":"https://helsinki.fi","shortcut_is_external":false,"shortcut_aria_label":""}
          ],
         "items":[
             {"menuLinkId":"f07001bbe36ffcc5fe13afd516cbc990","label":"Search programmes and courses","url":"https://helsinki.fi","description":""},
             {"menuLinkId":"dcf3d24e3ce118fe53632f4c351692d2","label":"Apply to doctoral programmes","url":"https://helsinki.fi","description":""}
         ]},
        {"menuLinkId":"81d3be1691a7dcdadf5af28c287d65a5",
         "isActive":"false",
         "label":"Careers",
         "labelExtra":"Careers",
         "url":"https://helsinki.fi",
         "description":"",
         "shortcutsTitle":"Shortcuts",
         "closeButtonTitle":"Close",
         "shortcuts":[
          ],
         "items":[
             {"menuLinkId":"f07001bbe36ffcc5fe13afd516cbc990","label":"Open positions","url":"https://helsinki.fi","description":""},
             {"menuLinkId":"dcf3d24e3ce118fe53632f4c351692d2","label":"Academic careers","url":"https://helsinki.fi","description":""}
         ]}
      ]'
    >
    <hy-menu slot="menu" menu-button-breadcrumb-home="Etusivu" menu-button-breadcrumb-main="Päävalikko" menu-button-breadcrumb-logourl="/fi" data-menu-donate="[{'label':'Lahjoita','url':'https://www.helsinki.fi/fi/yhteistyo/lahjoittajille'}]" open="false" logo-label="Helsingin yliopisto" logo-url="/fi" site-label="undefined" site-url="undefined" menu-button-submenu-expand="Avaa alavalikko" menu-button-breadcrumb-return="Palaa edelliselle tasolle" menu-language-label-open="Avaa kielivalikko" menu-language-label-close="Sulje kielivalikko" label-front-page="Etusivu" class="hydrated" data-menu-language="[{'langCode':'fi','abbr':'SUOMI','label':'SUOMI (FI)','url':'/fi/etusivu','isActive':true},{'langCode':'sv','abbr':'SVENSKA','label':'SVENSKA (SV)','url':'/sv/startsida'},{'langCode':'en','abbr':'ENGLISH','label':'ENGLISH (EN)','url':'/en/frontpage'}]" menu-type="desktop">
        <hy-menu-level-container menu-level="1" menu-type="desktop" menu-button-submenu-expand="Avaa alavalikko">
          <hy-menu-item menu-link-id="1" url="#" label="News">
            <hy-menu-level-container menu-level="2">
              <hy-menu-item menu-link-id="2" url="#" label="News"></hy-menu-item>
              <hy-menu-item menu-link-id="3" url="#" label="Events"></hy-menu-item>
              <hy-menu-item menu-link-id="4" url="#" label="Think Corner"></hy-menu-item>
              <hy-menu-item menu-link-id="5" url="#" label="Unitube"></hy-menu-item>
            </hy-menu-level-container>
          </hy-menu-item>
          <hy-menu-item menu-link-id="6" url="#" label="Research" in-active-trail="true">
            <hy-menu-level-container menu-level="2">
              <hy-menu-item menu-link-id="7" url="#" label="Top research">
                <hy-menu-level-container menu-level="3">
                  <hy-menu-item menu-link-id="8" url="#" label="Centres of excellence"></hy-menu-item>
                  <hy-menu-item menu-link-id="9" url="#" label="Academy professors"></hy-menu-item>
                  <hy-menu-item menu-link-id="10" url="#" label="ERC researchers and projects"></hy-menu-item>
                  <hy-menu-item menu-link-id="11" url="#" label="Highly cited researchers"></hy-menu-item>
                  <hy-menu-item menu-link-id="12" url="#" label="Strategic research areas"></hy-menu-item>
                  <hy-menu-item menu-link-id="13" url="#" label="Profile-building research areas"></hy-menu-item>
                  <hy-menu-item menu-link-id="14" url="#" label="Research impact"></hy-menu-item>
                </hy-menu-level-container>
              </hy-menu-item>
              <hy-menu-item menu-link-id="15" url="#" label="Researchers"></hy-menu-item>
              <hy-menu-item menu-link-id="16" url="#" label="Fields of science"></hy-menu-item>
              <hy-menu-item menu-link-id="17" url="#" label="Research groups"></hy-menu-item>
              <hy-menu-item menu-link-id="18" url="#" label="Doctoral education">
                <hy-menu-level-container menu-level="3">
                  <hy-menu-item menu-link-id="19" url="#" label="Structure of the doctoral degree"></hy-menu-item>
                  <hy-menu-item menu-link-id="20" url="#" label="Research skills"></hy-menu-item>
                  <hy-menu-item menu-link-id="21" url="#" label="Doctoral dissertation"></hy-menu-item>
                  <hy-menu-item
                    menu-link-id="22"
                    url="#"
                    label="Public examination of the doctoral dissertation"
                  ></hy-menu-item>
                  <hy-menu-item menu-link-id="23" url="#" label="The research career"></hy-menu-item>
                </hy-menu-level-container>
              </hy-menu-item>
              <hy-menu-item menu-link-id="24" url="#" label="Research institutes"></hy-menu-item>
              <hy-menu-item menu-link-id="25" url="#" label="Research stations"></hy-menu-item>
              <hy-menu-item
                menu-link-id="26"
                url="#"
                label="Services for researchers and research policy"
                in-active-trail="true"
              >
                <hy-menu-level-container menu-level="3">
                  <hy-menu-item menu-link-id="27" url="#" label="Research infrastructures">
                    <hy-menu-level-container menu-level="4">
                      <hy-menu-item
                        menu-link-id="28"
                        url="#"
                        label="Research infrastructure development programme"
                      ></hy-menu-item>
                    </hy-menu-level-container>
                  </hy-menu-item>
                  <hy-menu-item menu-link-id="29" url="#" label="Research funding"></hy-menu-item>
                  <hy-menu-item menu-link-id="30" url="#" label="Data management"></hy-menu-item>
                  <hy-menu-item menu-link-id="31" url="#" label="Research ethics" in-active-trail="true">
                    <hy-menu-level-container menu-level="4">
                      <hy-menu-item
                        menu-link-id="32"
                        url="#"
                        label="Ethical Review Board in the Humanities and Social and Behavioral Sciences"
                      ></hy-menu-item>
                      <hy-menu-item
                        menu-link-id="33"
                        url="#"
                        label="Viikki Campus Research Ethics Committee"
                        in-active-trail="true"
                        is-active="true"
                      ></hy-menu-item>
                      <hy-menu-item
                        menu-link-id="34"
                        url="#"
                        label="Research ethics committee of the Faculty of Medicine"
                      ></hy-menu-item>
                    </hy-menu-level-container>
                  </hy-menu-item>
                  <hy-menu-item menu-link-id="35" url="#" label="Open science">
                    <hy-menu-level-container menu-level="4">
                      <hy-menu-item
                        menu-link-id="36"
                        url="#"
                        label="Open science services for researchers"
                      ></hy-menu-item>
                      <hy-menu-item menu-link-id="37" url="#" label="Principles of open publishing"></hy-menu-item>
                      <hy-menu-item menu-link-id="38" url="#" label="Data policy"></hy-menu-item>
                    </hy-menu-level-container>
                  </hy-menu-item>
                  <hy-menu-item menu-link-id="39" url="#" label="Commercialisation of research">
                    <hy-menu-level-container menu-level="4">
                      <hy-menu-item menu-link-id="40" url="#" label="Disclose an innovation"></hy-menu-item>
                      <hy-menu-item menu-link-id="41" url="#" label="Invention rights and protection"></hy-menu-item>
                      <hy-menu-item
                        menu-link-id="42"
                        url="#"
                        label="Stages of the commercialisation process"
                      ></hy-menu-item>
                      <hy-menu-item
                        menu-link-id="43"
                        url="#"
                        label="How to fund commercialisation of research"
                      ></hy-menu-item>
                      <hy-menu-item menu-link-id="44" url="#" label="Why commercialise?"></hy-menu-item>
                    </hy-menu-level-container>
                  </hy-menu-item>
                </hy-menu-level-container>
              </hy-menu-item>
            </hy-menu-level-container>
          </hy-menu-item>
          <hy-menu-item menu-link-id="45" url="#" label="Admissions"></hy-menu-item>
          <hy-menu-item menu-link-id="46" url="#" label="Cooperation"></hy-menu-item>
          <hy-menu-item menu-link-id="47" url="#" label="About us"></hy-menu-item>
          <hy-menu-item menu-link-id="48" menu-item-alternative="true" url="#" label="Faculties and units">
            <hy-menu-level-container menu-level="2">
              <hy-menu-item menu-link-id="49" url="#" label="Faculty of Agriculture and Forestry"></hy-menu-item>
              <hy-menu-item menu-link-id="50" url="#" label="Faculty of Arts"></hy-menu-item>
              <hy-menu-item
                menu-link-id="51"
                url="#"
                label="Faculty of Biological and Environmental Sciences"
              ></hy-menu-item>
              <hy-menu-item menu-link-id="52" url="#" label="Faculty of Educational Sciences"></hy-menu-item>
              <hy-menu-item menu-link-id="53" url="#" label="Faculty of Law"></hy-menu-item>
              <hy-menu-item menu-link-id="54" url="#" label="Faculty of Medicine"></hy-menu-item>
              <hy-menu-item menu-link-id="55" url="#" label="Faculty of Pharmacy"></hy-menu-item>
              <hy-menu-item menu-link-id="56" url="#" label="Faculty of Science"></hy-menu-item>
              <hy-menu-item menu-link-id="57" url="#" label="Faculty of Social Sciences"></hy-menu-item>
              <hy-menu-item menu-link-id="58" url="#" label="Faculty of Theology"></hy-menu-item>
              <hy-menu-item menu-link-id="59" url="#" label="Faculty of Veterinary Medicine"></hy-menu-item>
              <hy-menu-item menu-link-id="50" url="#" label="Swedish School of Social Science"></hy-menu-item>
            </hy-menu-level-container>
          </hy-menu-item>
        </hy-menu-level-container>
      </hy-menu>
    </hy-site-header>
  </div>

# Properties

# Site header properties

Property Attribute Description Type Default
dataMenuDonate data-menu-donate Provides a URL and label for the donation link in JSON format. string undefined
dataMenuLanguage data-menu-language Provides menu language items in JSON format. string undefined
dataSiteHeaderLabels data-site-header-labels Provides site header labels JSON format. string undefined
dataSearchTools data-search-tools Provides Search Special Tools in JSON format DesktopLinks[] \| string undefined
dataSiteSearchLabels data-site-search-labels Provides Search Panel Labels string undefined
logoLabel logo-label Label for the site-logo. string undefined
logoUrl logo-url URL for the site-logo. string undefined
menuType menu-type Defines the menu type: side-navigation, desktop or mobile MenuType.desktop \| MenuType.mobile \| MenuType.sidenav MenuType.default

# Dependencies

# Depends on


Helsinki University Design System