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

Customisation

Customisation properties

You can use the theme property to customise the component. See all available theme variables in the table below.

Theme variable	Description
`--actionbar-background-color`	Background color of the action bar.
`--color-focus-outline`	Color of the focus outline.
`--header-background-color`	Background color of the header.
`--header-color`	Font color inside the header.
`--header-max-width`	Max width of the header.
`--header-z-index`	Z-index of the header.
`--lang-selector-dropdown-background-color`	Background color of the dropdown for the language select.
`--logo-height`	Height of the logo. Should be scaled down with smaller screens.
`--nav-background-color`	Background color of the navigation menu.
`--nav-border-color`	Border color of the navigation menu.
`--nav-link-hover-color`	Hover color of the navigation links.
`--nav-button-background-color`	Background color of the navigation link's dropdown toggling button.
`--nav-link-dropdown-background-color`	Background color of the navigation link dropdown.
`--nav-button-hover-background-color`	Hover background color of the navigation link's dropdown toggling button.
`--nav-drop-down-icon-color`	Color of the icon for the navigation link's dropdown toggling button.
`--universal-bar-background-color`	Background color of the universal bar.
`--header-spinner-color`	Color of the loading spinner in the login and logut buttons.
`--notification-bubble-background-color`	Background color of the notification bubble.
`--notification-bubble-text-color`	Font color inside the notification bubble.

Customisation example

React

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

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

() => (
  <Header
    theme={{
      '--color-focus-outline': 'var(--color-metro-dark)',
      '--header-color': 'var(--color-black)',
      '--header-focus-outline-color': 'var(--color-metro-dark)',
      '--actionbar-background-color': 'var(--color-engel)',
      '--nav-background-color': 'var(--color-engel-light)',
      '--nav-mobile-menu-background-color': 'var(--color-engel-light)',
      '--nav-border-color': 'var(--color-black)',
      '--nav-link-hover-color': 'var(--color-black)',
      '--universal-bar-background-color': 'var(--color-black-20)',
      '--nav-link-dropdown-background-color': 'var(--color-engel-light)',
      '--nav-button-background-color': 'var(--color-black-20)',
      '--nav-button-hover-background-color': 'var(--color-black-40)',
      '--nav-drop-down-icon-color': 'var(--color-black)',
      '--header-background-color': 'var(--color-engel-light)',
      '--header-spinner-color`': 'var(--color-black-10)',
    }}
  >
    <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={logoFi} alt="Helsingin kaupunki" />}
      menuButtonAriaLabel="Menu"
    />
    <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, logoFi } from 'hds-react';

() => (
  <Header
    theme={{
      '--color-focus-outline': 'var(--color-metro-dark)',
      '--header-color': 'var(--color-black)',
      '--header-focus-outline-color': 'var(--color-metro-dark)',
      '--actionbar-background-color': 'var(--color-engel)',
      '--nav-background-color': 'var(--color-engel-light)',
      '--nav-mobile-menu-background-color': 'var(--color-engel-light)',
      '--nav-border-color': 'var(--color-black)',
      '--nav-link-hover-color': 'var(--color-black)',
      '--universal-bar-background-color': 'var(--color-black-20)',
      '--nav-link-dropdown-background-color': 'var(--color-engel-light)',
      '--nav-button-background-color': 'var(--color-black-20)',
      '--nav-button-hover-background-color': 'var(--color-black-40)',
      '--nav-drop-down-icon-color': 'var(--color-black)',
      '--header-background-color': 'var(--color-engel-light)',
      '--header-spinner-color`': 'var(--color-black-10)',
    }}
  >
    <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={logoFi} alt="Helsingin kaupunki" />}
      menuButtonAriaLabel="Menu"
    />
    <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>
)