Site Header
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