Helsinki Design System | Header

DraftAccessible

The Header component is located at the top of the page above the main body content. It provides a place for levels of primary navigation and site-wide actions.

A work in progress!

The Header components are a collection of new navigation components the HDS team is currently fine tuning. This means that these components are subject to change. We are open to feedback regarding how they work.

Usage
Code
Accessibility
Customisation

Code

Example with all the components

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Header, IconSearch, IconUser, IconSignout, Logo, logoFi, logoSv, logoSvDark } from 'hds-react';

() => {
  const languages = [
    { label: 'Suomi', value: 'fi', isPrimary: true },
    { label: 'Svenska', value: 'sv', isPrimary: true },
    { label: 'English', value: 'en', isPrimary: true },
    { label: 'Français', value: 'fr' },
  ];
  const searchAction = () => {
    console.log('Open search page');
  };

  const [href, setHref] = React.useState('');
  const [lang, setLang] = React.useState('fi');

  const languageChangedStateAction = (language) => {
    setLang(language);
  };

  const [I18n, setI18n] = React.useState(translations[lang]);

  React.useEffect(() => {
    setI18n(translations[lang]);
  }, [lang]);

  return (
    <>
      <Header onDidChangeLanguage={languageChangedStateAction} languages={languages}>
        <Header.SkipLink skipTo="#content" label={I18n.skipToContent} />
        <Header.UniversalBar primaryLinkText={I18n.headerTitle} primaryLinkHref="#">
          <Header.Link href="#uutiset" label={I18n.news} />
          <Header.Link href="#asioi_verkossa" label={I18n.online} />
          <Header.Link href="#anna_palautetta" label={I18n.feedback} />
        </Header.UniversalBar>

        <Header.ActionBar
          title={I18n.headerTitle}
          frontPageLabel={I18n.frontPage}
          titleAriaLabel={I18n.headerTitle}
          titleHref="https://hel.fi"
          logo={<Logo src={logoSrcFromLanguageAndTheme(lang, 'light')} alt={I18n.headerTitle} />}
          logoAriaLabel={I18n.ariaLogo}
          logoHref="https://hel.fi"
          menuButtonLabel={I18n.menuLabel}
          menuButtonAriaLabel={I18n.ariaMenuButton}
          openFrontPageLinksAriaLabel="Avaa Etusivun linkkivalikko"
          onMenuClick={(e) => e.stopPropagation()}
        >
          <Header.LanguageSelector ariaLabel={I18n.ariaLanguageSelection} languageHeading={I18n.otherLanguages}>
            <Header.ActionBarSubItemGroup label={I18n.infoOtherLanguages}>
              <Header.ActionBarSubItem label={I18n.clearFinnish} external href="www.example.com" lang="fi" />
              <Header.ActionBarSubItem label={I18n.signLanguage} external href="www.example.com" lang="fse" />
            </Header.ActionBarSubItemGroup>
            <Header.ActionBarSubItemGroup label={I18n.forTravellers}>
              <Header.ActionBarSubItem label="MyHelsinki.fi" external href="www.example.com" lang="fi" />
            </Header.ActionBarSubItemGroup>
            <Header.ActionBarSubItemGroup label={I18n.forImmigrants}>
              <Header.ActionBarSubItem label="InfoFinland.fi" external href="www.example.com" lang="fi" />
            </Header.ActionBarSubItemGroup>
          </Header.LanguageSelector>
          <Header.ActionBarItem
            label={I18n.headerSearch}
            icon={<IconSearch />}
            id="action-bar-search"
            onClick={searchAction}
            closeLabel={I18n.close}
          />
          <Header.ActionBarItem label="Testi Käyttäjänimi" avatar="TK" fixedRightPosition>
            <Header.ActionBarSubItem label="Omat tiedot" href="/" />
            <Header.ActionBarSubItem
              label="Viestit"
              href="/"
              notificationBubbleAriaLabel="Uusia viestejä"
              notificationBubbleContent="2"
            />
            <Header.ActionBarSubItem
              label="Kirjaudu ulos"
              bold
              iconRight={<IconSignout />}
              onClick={() => console.log('Signout')}
            />
          </Header.ActionBarItem>
        </Header.ActionBar>
        <Header.NavigationMenu>
          <Header.Link
            label={I18n.healthAndndSocialServices}
            onClick={(event) => {
              event.preventDefault();
              setHref('#sosiaali-_ja_terveyspalvelut');
            }}
            active={href.includes('#sosiaali-_ja_terveyspalvelut')}
            dropdownLinks={[
              <Header.Link
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#sosiaali-_ja_terveyspalvelut#terveydenhoito');
                }}
                label={I18n.healtcare}
                active={href.includes('#terveydenhoito')}
                dropdownLinks={[
                  <Header.Link
                    active={href.includes('#hammashoito')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#sosiaali-_ja_terveyspalvelut#terveydenhoito#hammashoito');
                    }}
                    label={I18n.dentalCare}
                  />,
                ]}
              />,
              <Header.Link
                active={href.includes('#senioripalvelut')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#sosiaali-_ja_terveyspalvelut#senioripalvelut');
                }}
                label={I18n.seniorServices}
              />,
            ]}
          />
          <Header.Link
            active={href.includes('#kasvatus_ja_koulutus')}
            onClick={(event) => {
              event.preventDefault();
              setHref('#kasvatus_ja_koulutus');
            }}
            label={I18n.childHoodAndEducation}
            dropdownLinks={[
              <Header.Link
                active={href.includes('#varhaiskasvatus')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#kasvatus_ja_koulutus#varhaiskasvatus');
                }}
                label={I18n.earlyChildhoodEducation}
              />,
              <Header.Link
                active={href.includes('#esiopetus')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#kasvatus_ja_koulutus#esiopetus');
                }}
                label={I18n.prePrimaryEducation}
              />,
              <Header.Link
                active={href.includes('#koulutus')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#kasvatus_ja_koulutus#koulutus');
                }}
                label={I18n.education}
                dropdownLinks={[
                  <Header.Link
                    active={href.includes('#perusopetus')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#kasvatus_ja_koulutus#koulutus#perusopetus');
                    }}
                    label={I18n.basicEducation}
                  />,
                  <Header.Link
                    label={I18n.generalUpperSecondaryEducation}
                    active={href.includes('#lukiokoulutus')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#kasvatus_ja_koulutus#koulutus#lukiokoulutus');
                    }}
                  />,
                  <Header.Link
                    label={I18n.adultEducationCentres}
                    active={href.includes('#tyovaenopistot')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#kasvatus_ja_koulutus#koulutus#tyovaenopistot');
                    }}
                  />,
                ]}
              />,
            ]}
          />
          <Header.Link
            active={href.includes('#yritykset_ja_tyo')}
            onClick={(event) => {
              event.preventDefault();
              setHref('#yritykset_ja_tyo');
            }}
            label={I18n.businessAndWork}
            dropdownLinks={[
              <Header.Link
                label={I18n.employers}
                active={href.includes('#tyonantajat')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#yritykset_ja_tyo#tyonantajat');
                }}
                dropdownLinks={[
                  <Header.Link
                    label={I18n.business}
                    active={href.includes('#yritykset_ja_tyo#tyonantajat#yritykset')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#yritykset_ja_tyo#tyonantajat#yritykset');
                    }}
                  />,
                  <Header.Link
                    label={I18n.entrepreneurs}
                    active={href.includes('#yrittajat')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#yritykset_ja_tyo#tyonantajat#yrittajat');
                    }}
                  />,
                ]}
              />,
              <Header.Link
                active={href.includes('#yritykset_ja_tyo#tyonhakijat')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#yritykset_ja_tyo#tyonhakijat');
                }}
                label={I18n.jobSeekers}
                dropdownLinks={[
                  <Header.Link
                    label={I18n.openJobs}
                    active={href.includes('#yritykset_ja_tyo#tyonhakijat#avoimet_tyopaikat')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#yritykset_ja_tyo#tyonhakijat#avoimet_tyopaikat');
                    }}
                  />,
                ]}
              />,
            ]}
          />
        </Header.NavigationMenu>
      </Header>
      <div id="content" />
    </>
  );
}

import { Header, IconSearch, IconUser, IconSignout, Logo, logoFi, logoSv, logoSvDark } from 'hds-react';

() => {
  const languages = [
    { label: 'Suomi', value: 'fi', isPrimary: true },
    { label: 'Svenska', value: 'sv', isPrimary: true },
    { label: 'English', value: 'en', isPrimary: true },
    { label: 'Français', value: 'fr' },
  ];
  const searchAction = () => {
    console.log('Open search page');
  };

  const [href, setHref] = React.useState('');
  const [lang, setLang] = React.useState('fi');

  const languageChangedStateAction = (language) => {
    setLang(language);
  };

  const [I18n, setI18n] = React.useState(translations[lang]);

  React.useEffect(() => {
    setI18n(translations[lang]);
  }, [lang]);

  return (
    <>
      <Header onDidChangeLanguage={languageChangedStateAction} languages={languages}>
        <Header.SkipLink skipTo="#content" label={I18n.skipToContent} />
        <Header.UniversalBar primaryLinkText={I18n.headerTitle} primaryLinkHref="#">
          <Header.Link href="#uutiset" label={I18n.news} />
          <Header.Link href="#asioi_verkossa" label={I18n.online} />
          <Header.Link href="#anna_palautetta" label={I18n.feedback} />
        </Header.UniversalBar>

        <Header.ActionBar
          title={I18n.headerTitle}
          frontPageLabel={I18n.frontPage}
          titleAriaLabel={I18n.headerTitle}
          titleHref="https://hel.fi"
          logo={<Logo src={logoSrcFromLanguageAndTheme(lang, 'light')} alt={I18n.headerTitle} />}
          logoAriaLabel={I18n.ariaLogo}
          logoHref="https://hel.fi"
          menuButtonLabel={I18n.menuLabel}
          menuButtonAriaLabel={I18n.ariaMenuButton}
          openFrontPageLinksAriaLabel="Avaa Etusivun linkkivalikko"
          onMenuClick={(e) => e.stopPropagation()}
        >
          <Header.LanguageSelector ariaLabel={I18n.ariaLanguageSelection} languageHeading={I18n.otherLanguages}>
            <Header.ActionBarSubItemGroup label={I18n.infoOtherLanguages}>
              <Header.ActionBarSubItem label={I18n.clearFinnish} external href="www.example.com" lang="fi" />
              <Header.ActionBarSubItem label={I18n.signLanguage} external href="www.example.com" lang="fse" />
            </Header.ActionBarSubItemGroup>
            <Header.ActionBarSubItemGroup label={I18n.forTravellers}>
              <Header.ActionBarSubItem label="MyHelsinki.fi" external href="www.example.com" lang="fi" />
            </Header.ActionBarSubItemGroup>
            <Header.ActionBarSubItemGroup label={I18n.forImmigrants}>
              <Header.ActionBarSubItem label="InfoFinland.fi" external href="www.example.com" lang="fi" />
            </Header.ActionBarSubItemGroup>
          </Header.LanguageSelector>
          <Header.ActionBarItem
            label={I18n.headerSearch}
            icon={<IconSearch />}
            id="action-bar-search"
            onClick={searchAction}
            closeLabel={I18n.close}
          />
          <Header.ActionBarItem label="Testi Käyttäjänimi" avatar="TK" fixedRightPosition>
            <Header.ActionBarSubItem label="Omat tiedot" href="/" />
            <Header.ActionBarSubItem
              label="Viestit"
              href="/"
              notificationBubbleAriaLabel="Uusia viestejä"
              notificationBubbleContent="2"
            />
            <Header.ActionBarSubItem
              label="Kirjaudu ulos"
              bold
              iconRight={<IconSignout />}
              onClick={() => console.log('Signout')}
            />
          </Header.ActionBarItem>
        </Header.ActionBar>
        <Header.NavigationMenu>
          <Header.Link
            label={I18n.healthAndndSocialServices}
            onClick={(event) => {
              event.preventDefault();
              setHref('#sosiaali-_ja_terveyspalvelut');
            }}
            active={href.includes('#sosiaali-_ja_terveyspalvelut')}
            dropdownLinks={[
              <Header.Link
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#sosiaali-_ja_terveyspalvelut#terveydenhoito');
                }}
                label={I18n.healtcare}
                active={href.includes('#terveydenhoito')}
                dropdownLinks={[
                  <Header.Link
                    active={href.includes('#hammashoito')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#sosiaali-_ja_terveyspalvelut#terveydenhoito#hammashoito');
                    }}
                    label={I18n.dentalCare}
                  />,
                ]}
              />,
              <Header.Link
                active={href.includes('#senioripalvelut')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#sosiaali-_ja_terveyspalvelut#senioripalvelut');
                }}
                label={I18n.seniorServices}
              />,
            ]}
          />
          <Header.Link
            active={href.includes('#kasvatus_ja_koulutus')}
            onClick={(event) => {
              event.preventDefault();
              setHref('#kasvatus_ja_koulutus');
            }}
            label={I18n.childHoodAndEducation}
            dropdownLinks={[
              <Header.Link
                active={href.includes('#varhaiskasvatus')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#kasvatus_ja_koulutus#varhaiskasvatus');
                }}
                label={I18n.earlyChildhoodEducation}
              />,
              <Header.Link
                active={href.includes('#esiopetus')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#kasvatus_ja_koulutus#esiopetus');
                }}
                label={I18n.prePrimaryEducation}
              />,
              <Header.Link
                active={href.includes('#koulutus')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#kasvatus_ja_koulutus#koulutus');
                }}
                label={I18n.education}
                dropdownLinks={[
                  <Header.Link
                    active={href.includes('#perusopetus')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#kasvatus_ja_koulutus#koulutus#perusopetus');
                    }}
                    label={I18n.basicEducation}
                  />,
                  <Header.Link
                    label={I18n.generalUpperSecondaryEducation}
                    active={href.includes('#lukiokoulutus')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#kasvatus_ja_koulutus#koulutus#lukiokoulutus');
                    }}
                  />,
                  <Header.Link
                    label={I18n.adultEducationCentres}
                    active={href.includes('#tyovaenopistot')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#kasvatus_ja_koulutus#koulutus#tyovaenopistot');
                    }}
                  />,
                ]}
              />,
            ]}
          />
          <Header.Link
            active={href.includes('#yritykset_ja_tyo')}
            onClick={(event) => {
              event.preventDefault();
              setHref('#yritykset_ja_tyo');
            }}
            label={I18n.businessAndWork}
            dropdownLinks={[
              <Header.Link
                label={I18n.employers}
                active={href.includes('#tyonantajat')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#yritykset_ja_tyo#tyonantajat');
                }}
                dropdownLinks={[
                  <Header.Link
                    label={I18n.business}
                    active={href.includes('#yritykset_ja_tyo#tyonantajat#yritykset')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#yritykset_ja_tyo#tyonantajat#yritykset');
                    }}
                  />,
                  <Header.Link
                    label={I18n.entrepreneurs}
                    active={href.includes('#yrittajat')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#yritykset_ja_tyo#tyonantajat#yrittajat');
                    }}
                  />,
                ]}
              />,
              <Header.Link
                active={href.includes('#yritykset_ja_tyo#tyonhakijat')}
                onClick={(event) => {
                  event.preventDefault();
                  setHref('#yritykset_ja_tyo#tyonhakijat');
                }}
                label={I18n.jobSeekers}
                dropdownLinks={[
                  <Header.Link
                    label={I18n.openJobs}
                    active={href.includes('#yritykset_ja_tyo#tyonhakijat#avoimet_tyopaikat')}
                    onClick={(event) => {
                      event.preventDefault();
                      setHref('#yritykset_ja_tyo#tyonhakijat#avoimet_tyopaikat');
                    }}
                  />,
                ]}
              />,
            ]}
          />
        </Header.NavigationMenu>
      </Header>
      <div id="content" />
    </>
  );
}

Note: Header is designed to be used full width at the top of the page above the main content. Preview here might not scale correctly and mobile navigation menu is disabled. View full header example in Storybook.

Example with dark theme

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Header, Logo, logoFiDark } from 'hds-react';

() => (
  <Header theme="dark">
    <Header.SkipLink skipTo="#content" label="Skip To Content" />
    <Header.UniversalBar primaryLinkHref="#" primaryLinkText="Helsingin kaupunki">
      <Header.Link href="#" label="Uutiset" />
      <Header.Link href="#" label="Asioi verkossa" />
      <Header.Link href="#" label="Anna palautetta" />
    </Header.UniversalBar>
    <Header.ActionBar
      title="Helsingin kaupunki"
      titleAriaLabel="Helsingin kaupunki"
      titleHref="https://hel.fi"
      logoAriaLabel="Service logo"
      logoHref="https://hel.fi"
      logo={<Logo src={logoFiDark} alt="Helsingin kaupunki" />}
      menuButtonAriaLabel="Menu"
      onMenuClick={(e) => e.stopPropagation()}
    />
    <Header.NavigationMenu>
      <Header.Link
        as={Link}
        href="#"
        label="Sosiaali- ja terveyspalvelut"
        onClick={(event) => event.preventDefault()}
        dropdownLinks={[
          <Header.Link
            as={Link}
            href="#"
            label="Terveydenhoito"
            dropdownLinks={[
              <Header.Link as={Link} href="#" label="Hammashoito" />,
              <Header.Link as={Link} href="#" label="Julkinen terveydenhoito" />,
            ]}
          />,
          <Header.Link
            as={Link}
            href="#"
            label="Senioripalvelut"
            dropdownLinks={[
              <Header.Link as={Link} href="#" label="Viriketoiminta" />,
              <Header.Link as={Link} href="#" label="Kuntouttavat palvelut" />,
            ]}
          />,
        ]}
      />
      <Header.Link as={Link} href="#" label="Kasvatus ja koulutus" />
      <Header.Link as={Link} href="#" label="Asuminen" />
    </Header.NavigationMenu>
  </Header>
)

import { Header, Logo, logoFiDark } from 'hds-react';

() => (
  <Header theme="dark">
    <Header.SkipLink skipTo="#content" label="Skip To Content" />
    <Header.UniversalBar primaryLinkHref="#" primaryLinkText="Helsingin kaupunki">
      <Header.Link href="#" label="Uutiset" />
      <Header.Link href="#" label="Asioi verkossa" />
      <Header.Link href="#" label="Anna palautetta" />
    </Header.UniversalBar>
    <Header.ActionBar
      title="Helsingin kaupunki"
      titleAriaLabel="Helsingin kaupunki"
      titleHref="https://hel.fi"
      logoAriaLabel="Service logo"
      logoHref="https://hel.fi"
      logo={<Logo src={logoFiDark} alt="Helsingin kaupunki" />}
      menuButtonAriaLabel="Menu"
      onMenuClick={(e) => e.stopPropagation()}
    />
    <Header.NavigationMenu>
      <Header.Link
        as={Link}
        href="#"
        label="Sosiaali- ja terveyspalvelut"
        onClick={(event) => event.preventDefault()}
        dropdownLinks={[
          <Header.Link
            as={Link}
            href="#"
            label="Terveydenhoito"
            dropdownLinks={[
              <Header.Link as={Link} href="#" label="Hammashoito" />,
              <Header.Link as={Link} href="#" label="Julkinen terveydenhoito" />,
            ]}
          />,
          <Header.Link
            as={Link}
            href="#"
            label="Senioripalvelut"
            dropdownLinks={[
              <Header.Link as={Link} href="#" label="Viriketoiminta" />,
              <Header.Link as={Link} href="#" label="Kuntouttavat palvelut" />,
            ]}
          />,
        ]}
      />
      <Header.Link as={Link} href="#" label="Kasvatus ja koulutus" />
      <Header.Link as={Link} href="#" label="Asuminen" />
    </Header.NavigationMenu>
  </Header>
)

Properties

**Table 1**: Header properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing header.	`string`	-
`className`	Additional class names to apply.	`string`	-
`defaultLanguage`	Default selected language.	`LanguageType`	`fi`
`id`	Id for the element.	`string`	-
`onDidChangeLanguage`	Callback function for when user selects a new language.	`(newLanguage: string) => void`	-
`languages`	List of selectable languages.	`light`,`dark`, `HeaderCustomTheme`	`light`
`theme`	Header theme.	`LanguageOption[]`	`light`

The languages property is an array of LanguageOption objects. If LanguageOption.isPrimary is true, the option is shown outside of the dropdown, unless a non-primary language is selected.

This component also accepts all nativeheader element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

Header.SkipLink

Properties

**Table 2**: Header.SkipLink properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing SkipLink in more detail.	`string`	-
`label`	Label for the SkipLink.	`string`	-
`skipTo`	Id of the element where the SkipLink jumps to.	`string`	-
`theme`	Custom styling for SkipLink.	`SkipLinkTheme`	-

This component also accepts all nativea element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

Header.UniversalBar

Note: Under large sized screens (992px and down) the Header.UniversalBar is hidden and the contents are moved inside the the Header.ActionBar component's menu.

Properties

**Table 3**: Header.UniversalBar properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing UniversalBar.	`string`	-
`className`	Additional class names to apply.	`string`	-
`id`	ID for the UniversalBar element.	`string`	-
`primaryLinkHref`	Hypertext reference for the primary link.	`string`	-
`primaryLinkText`	Link text for the primary link	`string`	-
`role`	ARIA role to describe the contents.	`string`	-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

Header.ActionBar

Properties

**Table 4**: Header.ActionBar properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing ActionBar.	`string`	-
`className`	Additional class names to apply.	`string`	-
`frontPageLabel`	Label for front page link in mobile navigation menu.	`string`	-
`logoAriaLabel`	Aria-label for the logo.	`string`	-
`logoHref`	URL for the logo.	`string`	-
`logo`	Logo component.	`Logo`	-
`menuButtonLabel`	Label for the menu button.	`string`	`Menu`
`menuButtonAriaLabel`	Aria-label for the menu button.	`string`	-
`onLogoClick`	Callback function for when the logo is clicked.	`MouseEventHandler`	-
`onMenuClick`	Callback function for when the menu button is clicked.	`MouseEventHandler`	-
`onTitleClick`	Callback function for when the title is clicked.	`MouseEventHandler`	-
`openFrontPageLinksAriaLabel`	Aria-label for describing going back to main navigation links in mobile navigation menu.	`string`	-
`role`	ARIA role to describe the contents.	`string`	-
`title`	Service name.	`string`	-
`titleAriaLabel`	Aria-label for the title.	`string`	-
`titleStyle`	Style for the service name.	`TitleStyleType.Normal` `TitleStyleType.Bold`	`Normal`
`titleHref`	URL for the title.	`string`	-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

Header.ActionBarItem

Properties

**Table 5**: Header.ActionBarItem properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the item.	`string`	-
`avatar`	An avatar which replaces the icon. Usually user's initials, but can be any Element.	`string` `JSX.Element`	-
`closeIcon`	Icon for the item when dropdown is open.	`ReactNode`	-
`closeLabel`	Label for the item when dropdown is open.	`string` `JSX.Element`	-
`dropdownClassName`	Additional class name for the dropdown element.	`string`	-
`fixedRightPosition`	Boolean to set the item in a fixed position on the right side of the action bar behind a dividing line.	`boolean`	`false`
`fullwidth`	Boolean to set the item to be fullwidth under the ActionBar. Example use is automatically done with LanguageSelector in mobile view.	`boolean`	`false`
`icon`	Icon for the item.	`ReactNode`	-
`iconClassName`	Additional class name for the icon.	`string`	-
`id`	ID for the ActionBarItem.	`string`	-
`label`	Label for the item.	`string` `JSX.Element`	-
`labelOnRight`	Boolean to set the label to the right side of the icon.	`boolean`	`false`
`preventButtonResize`	If true, menu button resizing is prevented by rendering button's active state to a separate element.	`boolean`	`false`

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

Header.ActionBarButton

Properties

**Table 6**: Header.ActionBarButton properties
Property	Description	Values	Default value
`fixedRightPosition`	Boolean to set the item in a fixed position on the right side of the action bar behind a dividing line.	`boolean`	`false`
`fullwidth`	Boolean to set the item to be fullwidth under the ActionBar. Example use is automatically done with LanguageSelector in mobile view.	`boolean`	`false`
`icon`	Icon for the item.	`ReactNode`	-
`label`	Label for the item.	`string` `JSX.Element`	-
`labelOnRight`	Boolean to set the label to the right side of the icon.	`boolean`	`false`
`ref`	`RefObject` to store the element.	`RefObject`	-

This component also accepts all nativebutton element props.

Header.LanguageSelector

Language options, the default language, and a change listener are passed to the Header component.

Properties

**Table 7**: Header.LanguageSelector properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the dropdown button.	`string`	-
`languageHeading`	Heading for the list of languages inside the dropdown.	`string`	-
`sortLanguageOptions`	Function for sorting language options into primary and secondary. By default, all primary `LanguageOptions` as shown. If a secondary `LanguageOption` is selected, only that one is shown.	`(options: LanguageOption[], selectedLanguage: string) => [LanguageOption[], LanguageOption[]]`	-

This component also accepts all nativebutton element props.

Header.SimpleLanguageOptions

Header.SimpleLanguageOptions is an alternative to Header.LanguageSelector. Read more in the usage page.

Properties

**Table 8**: Header.SimpleLanguageOptions properties
Property	Description	Values	Default value
`languages`	Array of languages to render.	`LanguageOption[]`	-

This component also accepts all nativediv element props.

Header.Search

Properties

**Table 9**: Header.Search properties
Property	Description	Values	Default value
`label`	Label for the search input.	`string` `JSX.Element`	-
`onChange`	Callback function for the input value changes.	`(inputValue: string) => void`	-
`onSubmit`	Callback function for when input is submitted.	`(inputValue: string) => void`	-

This component also accepts all nativediv element props.

Header.NavigationMenu

Properties

**Table 10**: Header.NavigationMenu properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing NavigationMenu.	`string`	-
`id`	ID for the NavigationMenu.	`string`	-

This component also accepts all nativesection element props.

Header.Link

Custom Link and ActionBarButton

The Header.Link component has the as prop which you can use to use your own navigation link instead of our Header.Link, which uses HDS Link underneath. You can pass it as an element as={<CustomLink />} or as a component as={CustomLink}. The Header.ActionBarButton can be used as a plain button element without a dropdown like in Header.ActionBarItem.

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Header, Logo, logoFi, IconSignin } from 'hds-react';
import { Link } from 'gatsby';

() => {
  return (
    <>
      <Header>
        <Header.SkipLink skipTo="#content" label="Skip To Content" />
        <Header.UniversalBar primaryLinkText="Helsingin kaupunki" primaryLinkHref="#">
          <Header.Link href="#" label="Uutiset" />
          <Header.Link href="#" label="Asioi verkossa" />
          <Header.Link href="#" label="Anna palautetta" />
        </Header.UniversalBar>

        <Header.ActionBar
          title="Helsingin kaupunki"
          titleAriaLabel="Helsingin kaupunki"
          titleHref="https://hel.fi"
          logoAriaLabel="Service logo"
          logoHref="https://hel.fi"
          logo={<Logo src={logoFi} alt="Helsingin kaupunki" />}
          menuButtonAriaLabel="Menu"
          onMenuClick={(e) => e.stopPropagation()}
        >
          <Header.ActionBarButton
            label="Kirjaudu"
            icon={<IconSignin />}
            onClick={() => {
              window.alert('Kirjaudu clicked');
            }}
            fixedRightPosition
          />
        </Header.ActionBar>
        <Header.NavigationMenu>
          <Header.Link
            as={Link}
            href="#"
            label="Sosiaali- ja terveyspalvelut"
            onClick={(event) => event.preventDefault()}
            dropdownLinks={[
              <Header.Link
                as={Link}
                href="#"
                label="Terveydenhoito"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Hammashoito" />,
                  <Header.Link as={Link} href="#" label="Julkinen terveydenhoito" />,
                ]}
              />,
              <Header.Link
                as={Link}
                href="#"
                label="Senioripalvelut"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Viriketoiminta" />,
                  <Header.Link as={Link} href="#" label="Kuntouttavat palvelut" />,
                ]}
              />,
            ]}
          />
          <Header.Link
            as={Link}
            href="#"
            label="Kasvatus ja koulutus"
            dropdownLinks={[
              <Header.Link
                as={Link}
                href="#"
                label="Kasvatus"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Varhaiskasvatus" />,
                  <Header.Link as={Link} href="#" label="Esiopetus" />,
                ]}
              />,
              <Header.Link
                as={Link}
                href="#"
                label="Koulutus"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Perusopetus" />,
                  <Header.Link as={Link} href="#" label="Toisen asteen koulutus" />,
                  <Header.Link as={Link} href="#" label="Työväenopistot" />,
                ]}
              />,
            ]}
          />
          <Header.Link as={Link} href="#" label="Asuminen" />
        </Header.NavigationMenu>
      </Header>
      <div id="content" />
    </>
  );
}

import { Header, Logo, logoFi, IconSignin } from 'hds-react';
import { Link } from 'gatsby';

() => {
  return (
    <>
      <Header>
        <Header.SkipLink skipTo="#content" label="Skip To Content" />
        <Header.UniversalBar primaryLinkText="Helsingin kaupunki" primaryLinkHref="#">
          <Header.Link href="#" label="Uutiset" />
          <Header.Link href="#" label="Asioi verkossa" />
          <Header.Link href="#" label="Anna palautetta" />
        </Header.UniversalBar>

        <Header.ActionBar
          title="Helsingin kaupunki"
          titleAriaLabel="Helsingin kaupunki"
          titleHref="https://hel.fi"
          logoAriaLabel="Service logo"
          logoHref="https://hel.fi"
          logo={<Logo src={logoFi} alt="Helsingin kaupunki" />}
          menuButtonAriaLabel="Menu"
          onMenuClick={(e) => e.stopPropagation()}
        >
          <Header.ActionBarButton
            label="Kirjaudu"
            icon={<IconSignin />}
            onClick={() => {
              window.alert('Kirjaudu clicked');
            }}
            fixedRightPosition
          />
        </Header.ActionBar>
        <Header.NavigationMenu>
          <Header.Link
            as={Link}
            href="#"
            label="Sosiaali- ja terveyspalvelut"
            onClick={(event) => event.preventDefault()}
            dropdownLinks={[
              <Header.Link
                as={Link}
                href="#"
                label="Terveydenhoito"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Hammashoito" />,
                  <Header.Link as={Link} href="#" label="Julkinen terveydenhoito" />,
                ]}
              />,
              <Header.Link
                as={Link}
                href="#"
                label="Senioripalvelut"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Viriketoiminta" />,
                  <Header.Link as={Link} href="#" label="Kuntouttavat palvelut" />,
                ]}
              />,
            ]}
          />
          <Header.Link
            as={Link}
            href="#"
            label="Kasvatus ja koulutus"
            dropdownLinks={[
              <Header.Link
                as={Link}
                href="#"
                label="Kasvatus"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Varhaiskasvatus" />,
                  <Header.Link as={Link} href="#" label="Esiopetus" />,
                ]}
              />,
              <Header.Link
                as={Link}
                href="#"
                label="Koulutus"
                dropdownLinks={[
                  <Header.Link as={Link} href="#" label="Perusopetus" />,
                  <Header.Link as={Link} href="#" label="Toisen asteen koulutus" />,
                  <Header.Link as={Link} href="#" label="Työväenopistot" />,
                ]}
              />,
            ]}
          />
          <Header.Link as={Link} href="#" label="Asuminen" />
        </Header.NavigationMenu>
      </Header>
      <div id="content" />
    </>
  );
}

Properties

**Table 11**: Header.Link properties
Property	Description	Values	Default value
`active`	Set the link as the current page, giving it proper styles.	`boolean`	-
`as`	Element or component to use instead of Header.Link.	`Element`	`Link`
`className`	Additional classNames to apply to the link.	`string`	-
`closeDropdownAriaButtonLabel`	Aria-label for the dropdown button to describe the closing of the dropdown.	`string`	-
`dropdownButtonClassName`	Additional classNames to apply to the dropdown button.	`string`	-
`dropdownClassName`	Additional classNames to apply to the dropdown menu.	`string`	-
`dropdownLinkClassName`	Additional classNames to apply to the dropdown links.	`string`	-
`dropdownLinks`	Array of NavigationLink components to render in a dropdown.	`[<Header.Link>]`	-
`href`	Hypertext Reference of the link.	`string`	-
`label`	Label for the link.	`string`	-
`onDropdownButtonClick`	Callback fired when the dropdown button is clicked.	`function`	-
`openDropdownAriaButtonLabel`	Aria-label for the dropdown button to describe the opening of the dropdown.	`string`	-
`wrapperClassName`	Additional classNames for the element wrapping the link.	`string`	-

This component also accepts all nativea element props.

Header.ActionBarSubItem

Properties

**Table 12**: Header.ActionBarSubItem properties
Property	Description	Values	Default value
`iconLeft`	Icon element (on the left side of the label) for the action bar item.	`ReactNode`	-
`iconRight`	Icon element (on the right side of the label) for the action bar item.	`ReactNode`	-
`notificationBubbleContent`	Content for the right aligned red notification bubble.	`string`	-
`notificationBubbleAriaLabel`	Aria label for notification bubble.	`string`	-
`label`	Label for the action bar item.	`string` `JSX.Element`	-
`isHeading`	If heading style is used.	`boolean`	-
`bold`	If bold.	`boolean`	-
`href`	Hypertext Reference of the link.	`string`	-
`external`	If external link.	`boolean`	-
`openInExternalDomainAriaLabel`	The aria-label for opening link in an external domain.	`string`	-

This component also accepts all nativea element props.

Header.ActionBarSubItemGroup

Properties

**Table 13**: Header.ActionBarSubItemGroup properties
Description
Same properties as the Header.ActionBarSubItem. The component sets `isHeading` to `true`.

This component also accepts all nativea element props.

Header.LoginButton

Note about Header login components

The Header.LoginButton, Header.LogoutSubmenuButton and Header.UserMenuButton require a working Login Provider that cannot not be configured here. Working examples can be seen in the Storybook.

**Table 14**: Header.LoginButton properties
Property	Description	Values	Default value
`spinnerColor`	Color of the loading spinner.	`string`	`--header-spinner-color` or `--color-black-60`
`errorLabel`	Label shown in the error notification.	`string`	-
`errorText`	Text shown in the error notification.	`string`	-
`errorCloseAriaLabel`	Aria-label of the close button in the error notification.	`string`	-
`errorPosition`	Position of the error notification.	`NotificationProps['position']`	`top-right`
`loggingInText`	Screen reader text for the load indicator.	`string`	-
`id`	The id attribute of the element.	`string`	-
`redirectionProps`	Properties appended to the url when redirecting. Read more in the documentation of the oidcClient login method.	`LoginProps`	-
`redirectWithLanguage`	Should current Header language be appended to login parameters.	`boolean`	-
`onClick`	Called when the component is clicked and before the oidcClient.login() is called.	`HeaderActionBarItemButtonProps['onClick']`	-
`& Header.ActionBarItemButton properties`	Extends properties of the Header.ActionBarItemButton.	-	-

This component also accepts all nativea element props.

Header.LogoutSubmenuButton

Properties

**Table 15**: Header.LogoutSubmenuButton properties
Property	Description	Values	Default value
`spinnerColor`	Color of the loading spinner.	`string`	`--header-spinner-color` or `--color-black-60`
`errorLabel`	Label shown in the error notification.	`string`	-
`errorText`	Text shown in the error notification.	`string`	-
`errorCloseAriaLabel`	Aria-label of the close button in the error notification.	`string`	-
`errorPosition`	Position of the error notification.	`NotificationProps['position']`	`top-right`
`loggingOutText`	Screen reader text for the load indicator.	`string`	-
`id`	The id attribute of the element.	`string`	-
`redirectionProps`	Properties appended to the url when redirecting. Read more in the documentation of the oidcClient logout method.	`LoginProps`	-
`redirectWithLanguage`	Should current Header language be appended to login parameters.	`boolean`	-
`onClick`	Called when the component is clicked and before the oidcClient.logout() is called.	`HeaderActionBarItemButtonProps['onClick']`	-
`& Header.ActionBarItemButton properties`	Extends properties of the Header.ActionBarItemButton.	-	-

This component also accepts all nativea element props.

Header.UserMenuButton

Properties

This component uses the Header.ActionBarItem and automates its properties. A custom user menu can be built by copying the same process. The component should have child components, usually the Header.LogoutSubmenuButton.

**Table 16**: Header.UserMenuButton properties
Description
No properties to set. User data is picked from the Login Provider.

This component also accepts all nativea element props.

Packages

Package	Included	Storybook link	Source link
HDS React	Yes	View in Storybook	View source
HDS Core	No	-	-

Header

Code

Table of contents

Header

Example with all the components

Example with dark theme

Properties

Header.SkipLink

Properties

Header.UniversalBar

Properties

Header.ActionBar

Properties

Header.ActionBarItem

Properties

Header.ActionBarButton

Properties

Header.LanguageSelector

Properties

Header.SimpleLanguageOptions

Properties

Header.Search

Properties

Header.NavigationMenu

Properties

Header.Link

Custom Link and ActionBarButton

Properties

Header.ActionBarSubItem

Properties

Header.ActionBarSubItemGroup

Properties

Header.LoginButton

Header.LogoutSubmenuButton

Properties

Header.UserMenuButton

Properties

Packages