Group Header

In progress

Group header is used on group pages.

# 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
      is-group="true"
      site-label="University of Helsinki"
      site-url="/"
      logo-label="Eläinlääketieteellinen tiedekunta"
      logo-url="/group/41"
      search-button-label="Search"
      data-site-header-labels='{
          "menu_labels": {"open":"Open mobile menu","close":"Close mobile menu panel","expand":"Expand submenu"},
          "search_labels":{"label":"Search","open":"Open search","close":"Close search"},
          "group_pages":{"university_main_menu":"University main menu"},
          "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-main-menu-links='
      [{"menuLinkId":"0bda75ab91f8bad1d33de860414b7b17","isActive":"false","isExternal":false,"label":"News","url":"/en/news","description":"","closeButtonTitle":"Close"},
      {"menuLinkId":"494b9cd4d0873b762b7d39cf4e3ea594","isActive":"false","isExternal":false,"label":"Admissions and education","url":"/en/admissions-and-education","description":"","closeButtonTitle":"Close"},
      {"menuLinkId":"f3c91fca09455013c086123615d3e477","isActive":"false","isExternal":false,"label":"Research","url":"/en/research","description":"Explore our research, our research units and our top-notch research infrastructures.","closeButtonTitle":"Close"},
      {"menuLinkId":"b1e3dca876dba1a2325a9136ea02092d","isActive":"false","isExternal":false,"label":"Cooperation","url":"/en/cooperation","description":"","closeButtonTitle":"Close"},
      {"menuLinkId":"9a1297e0af8490e7d111de27a809a650","isActive":"false","isExternal":false,"label":"About us","url":"/en/about-us","description":"","closeButtonTitle":"Close"},
      {"menuLinkId":"a4e28b83b9a8708b86458c720e8dfc1b","isActive":"false","isExternal":false,"label":"Faculties and units","url":"/en/faculties-and-units","description":"","closeButtonTitle":"Close"}]
      '
      data-desktop-links='
      [{"menuLinkId":"06ec39de0916925f3bcfa55000ae2382","isActive":"false","isExternal":false,"label":"Tutkimus","labelExtra":"Tutkimus","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus","description":"","toggleOff":"false","shortcutsTitle":"Oikopolut","closeButtonTitle":"Sulje","shortcuts":[],"items":[{"menuLinkId":"7530adbf69a6133712cab0a312b58093","isExternal":false,"label":"One Health -tutkimus","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/one-health-tutkimus","description":""},{"menuLinkId":"4d706a30dc323adc9123dc6cb294bac7","isExternal":false,"label":"Elintarvikehygienia ja ympäristöterveys","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/elintarvikehygienia-ja-ymparistoterveys","description":""},{"menuLinkId":"cd6fe75fca932b61bf44df617dff9d04","isExternal":false,"label":"Eläinlääketieteelliset biotieteet","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/elainlaaketieteelliset-biotieteet","description":""},{"menuLinkId":"cde80895f90143ec07fed4525893173a","isExternal":false,"label":"Kliininen hevos- ja pieneläinlääketiede","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/kliininen-hevos-ja-pienelainlaaketiede","description":""},{"menuLinkId":"0d1d11c47a4d59562d3727113fb70d69","isExternal":false,"label":"Kliininen tuotantoeläinlääketiede","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/kliininen-tuotantoelainlaaketiede","description":""},{"menuLinkId":"3d87ce6582e44746bea5f1bb165c542f","isExternal":false,"label":"Tutkimus eläinsairaalassa","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/tutkimus-elainsairaalassa","description":""},{"menuLinkId":"b3ee2d3170cb383bcee242b1ee10530a","isExternal":false,"label":"Tutkijoiden palvelut","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/tutkijoiden-palvelut","description":""},{"menuLinkId":"b9d70e08fee5973e3e518e1b870e050e","isExternal":false,"label":"Tutkimusryhmät","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/tutkimusryhmat","description":""},{"menuLinkId":"e32846eb4a5fb66b8503a38509559a5d","isExternal":false,"label":"Julkaisut","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/julkaisut","description":""},{"menuLinkId":"abd8573e674c89790a7e0500fa588289","isExternal":false,"label":"Tohtorikoulutus","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tutkimus/tohtorikoulutus","description":""}]},{"menuLinkId":"3fe3932b668c94c183206b0e88fc1a29","isActive":"false","isExternal":false,"label":"Koulutus ja opetus","labelExtra":"Koulutus ja opetus","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/koulutus-ja-opetus","description":"","toggleOff":"false","shortcutsTitle":"Oikopolut","closeButtonTitle":"Sulje","shortcuts":[],"items":[{"menuLinkId":"86de777405a73586677dee95725421dd","isExternal":false,"label":"Jatkuva oppiminen","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/koulutus-ja-opetus/jatkuva-oppiminen","description":""},{"menuLinkId":"49d323bd393a0128087abfa6b824e398","isExternal":false,"label":"Koulutusohjelmat","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/koulutus-ja-opetus/koulutusohjelmat","description":""},{"menuLinkId":"3f4e6991b8b20f5c69f1b6f6edadea76","isExternal":false,"label":"Millaista opetuksemme on?","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/koulutus-ja-opetus/millaista-opetuksemme","description":""}]},{"menuLinkId":"bc77dcd5805a80d703329dc600c5cdb3","isActive":"false","isExternal":false,"label":"Yhteistyö","labelExtra":"Yhteistyö","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/yhteistyo","description":"","toggleOff":"true","shortcutsTitle":"Oikopolut","closeButtonTitle":"Sulje","shortcuts":[],"items":[{"menuLinkId":"ee3c912b8efe3fa43c5a5a3f12a6e16d","isExternal":false,"label":"Eläinlääketieteellisen alumnit","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/yhteistyo/elainlaaketieteellisen-alumnit","description":""}]},{"menuLinkId":"3deb73f64b6f2b597676ed9f861c7d6d","isActive":"false","isExternal":false,"label":"Eläinsairaala","labelExtra":"Eläinsairaala","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/elainsairaala","description":"","toggleOff":"true","shortcutsTitle":"Oikopolut","closeButtonTitle":"Sulje","shortcuts":[],"items":[]},{"menuLinkId":"51a0e8e460e0fd848ce39b3edec568ef","isActive":"false","isExternal":false,"label":"Tiedekunta","labelExtra":"Tiedekunta","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tiedekunta","description":"","toggleOff":"false","shortcutsTitle":"Oikopolut","closeButtonTitle":"Sulje","shortcuts":[],"items":[{"menuLinkId":"8e26654c058f7982a3c3d880c9f330c0","isExternal":false,"label":"Yhteystiedot","url":"/fi/beta/tiedekunta/elainlaaketieteellinen-tiedekunta/tiedekunta/yhteystiedot","description":""}]}]
      '
    >
      <hy-menu slot="menu">
        <hy-menu-level-container menu-level="1">
          <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

# Group 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