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

Code examples

With all the components

React

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

import { Header, IconSearch, IconUser, 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"
          menuButtonAriaLabel={I18n.ariaMenuButton}
          openFrontPageLinksAriaLabel="Avaa Etusivun linkkivalikko"
          onMenuClick={(e) => e.stopPropagation()}
        >
          <Header.LanguageSelector ariaLabel={I18n.ariaLanguageSelection} languageHeading={I18n.otherLanguages}>
            <h3>{I18n.infoOtherLanguages}</h3>
            <Link external href="www.example.com" size="S" lang="fi">
              {I18n.clearFinnish}
            </Link>
            <Link external href="www.example.com" size="S" lang="fse">
              {I18n.signLanguage}
            </Link>
            <h3>{I18n.forTravellers}</h3>
            <Link external href="www.example.com" size="S" lang="fi">
              MyHelsinki.fi
            </Link>
            <h3>{I18n.forImmigrants}</h3>
            <Link external href="www.example.com" size="S" lang="fi">
              InfoFinland.fi
            </Link>
          </Header.LanguageSelector>
          <Header.ActionBarItem
            label={I18n.headerSearch}
            icon={<IconSearch />}
            id="action-bar-search"
            onClick={searchAction}
            closeLabel={I18n.close}
          />
          <Header.ActionBarItem
            label={translations[lang].headerLogin}
            fixedRightPosition
            icon={<IconUser />}
            id="action-bar-login"
            closeLabel={I18n.close}
            preventButtonResize
          >
            <h3>{I18n.loginOptions}</h3>
          </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, 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"
          menuButtonAriaLabel={I18n.ariaMenuButton}
          openFrontPageLinksAriaLabel="Avaa Etusivun linkkivalikko"
          onMenuClick={(e) => e.stopPropagation()}
        >
          <Header.LanguageSelector ariaLabel={I18n.ariaLanguageSelection} languageHeading={I18n.otherLanguages}>
            <h3>{I18n.infoOtherLanguages}</h3>
            <Link external href="www.example.com" size="S" lang="fi">
              {I18n.clearFinnish}
            </Link>
            <Link external href="www.example.com" size="S" lang="fse">
              {I18n.signLanguage}
            </Link>
            <h3>{I18n.forTravellers}</h3>
            <Link external href="www.example.com" size="S" lang="fi">
              MyHelsinki.fi
            </Link>
            <h3>{I18n.forImmigrants}</h3>
            <Link external href="www.example.com" size="S" lang="fi">
              InfoFinland.fi
            </Link>
          </Header.LanguageSelector>
          <Header.ActionBarItem
            label={I18n.headerSearch}
            icon={<IconSearch />}
            id="action-bar-search"
            onClick={searchAction}
            closeLabel={I18n.close}
          />
          <Header.ActionBarItem
            label={translations[lang].headerLogin}
            fixedRightPosition
            icon={<IconUser />}
            id="action-bar-login"
            closeLabel={I18n.close}
            preventButtonResize
          >
            <h3>{I18n.loginOptions}</h3>
          </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.

Custom Link

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}.

React

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

import { Header, Logo, logoFi } 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.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 } 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.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" />
    </>
  )
}

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>
)

Packages

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

Properties

**Table 1**: Header properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing header.	`string`	-
`className`	Additional class names to apply.	`string`	-
`id`	Id for the element.	`string`	-
`theme`	Header theme.	`light`,`dark`, `HeaderCustomTheme`	`light`

**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`	-

**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`	-

**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`	-
`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`	-
`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`	-
`role`	ARIA role to describe the contents.	`string`	-

**Table 5**: Header.ActionBarItem properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the item.	`string`	-
`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`

**Table 6**: 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[]]`	-

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

**Table 8**: 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`	-

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

**Table 9**: 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`	-