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

Example

Skip To Content
Helsingin kaupunkiHelsingin kaupunki

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.

Principles

  • It is strongly recommended to always include the header component on every page in your service.
  • The Header component is a wrapper for the HDS header navigation components. This means you should put all the other header elements inside this component.
  • The only mandatory component inside the header is HeaderActionBar. Other components may be used if needed.
  • The inner components should always be in this order: Header.SkipLink, Header.UniversalBar, HeaderActionBar and HeaderNavigationBar.
  • Try to keep the order of actions (language select, search, log in) consistent in navigation. Do not change the default order without a good reason.
  • To better understand how the navigation elements work and how they should be combined, see also Navigation pattern.

Variations

Variations are presented in the same order that they should be declared in inside the Header component.

With skip link

Use the Header.SkipLink component to help keyboard-only users skip to the main content on a page.

  • Using the Header.SkipLink component is optional but we recommend using it if you have any other header components beside the ActionBar.
  • The Header.SkipLink supports ariaLabel prop which gives possibility to define more informative text for screen readers.
Skip To Content
Helsingin kaupunkiHelsingin kaupunki

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 minimal header example with skip link in Storybook.

With universal bar

Header.UniversalBar is aimed to provide easy access for frequently visited and useful links, e.g. feedback and news.

  • Using the Header.UniversalBar component is optional.
  • If the primary link information is provided, it should direct to the webpage of City of Helsinki. We recommend using it if your service is outside the hel.fi domain in order to provide a quick and easy access to the City of Helsinki web page.
  • Keep the link labels clear and concise. Prefer max 1-2 word long labels so the labels don't go to the next line on smaller screens. Avoid starting multiple link labels with the same word.
  • 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.
Helsingin kaupunkiHelsingin kaupunki

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 with universal bar in Storybook.

With action bar

Header.ActionBar is the section that makes your service recognizeable. It provides the logo, name of the service and language selection, search and login features when needed.

  • You should always include the Header.ActionBar component in your Header.
  • The component provides two different service name styles via the titleStyle prop: TitleStyleType.Normal, which is the default, and TitleStyleType.Bold. We recommend to have a maximum of 22 character (including spaces) for title name regardless of which style is used.
  • Under large sized screens (992px and down) the Header.ActionBar undergoes some visual changes:
    • The contents of Header.NavigationMenu and Header.UniversalBar, if you have provided either of them, will move inside Header.ActionBar's menu.
    • The Header.LanguageSelector moves under the ActionBar.
Helsingin kaupunkiHelsingin kaupunki

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 featured header example with action bar in Storybook.

With language selector
A work in progress!
The Header.LanguageSelector component is subject to change, mainly regarding how the dropdown offering additional languages is going to look and work.

Header.LanguageSelector offers the languages for the whole service. It is recommended to offer full Finnish, Swedish and English versions. Other languages can be added based on the need and target audience of the service. Smaller subset of content can be separated from fully translated content.

  • Using the Header.LanguageSelector is optional.
  • The Header.LanguageSelector component doesn't offer localisation logic, it merely provides the UI for offering and changing languages. We trust HDS users have their own localisation libraries that they can integrate with our component.
  • The Header component has onDidChangeLanguage prop function, where user can define a callback function which gets the selected language key (value) as parameter.
  • See example for Header.LanguageSelector in Storybook.
  • Under large sized screens (992px and down) the Header.LanguageSelector moves under the Header.ActionBar.

Use the Header.LanguageSelector when

  • There are no reasons not to. This is the default and fulfills almost all needs and use cases.
  • Responsive mobile view is needed. There is no room for many options unless some are placed in a dropdown.
  • There are many selectable languages, some primary and some secondary. Primary languages are usually shown outside of the dropdown.

Header.SimpleLanguageOptions is an alternative to Header.LanguageSelector. Like its name suggests, it is very simple and has no ordering logic or a mobile version. It should not be used unless the Header.LanguageSelector is not suitable for your special scenario.

Use the Header.SimpleLanguageOptions when

  • All language options should be visible at all the times.
  • Language options should not change location in mobile views.
  • The ordering of the options must be fixed and even the sortLanguageOptions option of the Header.LanguageSelector does not help.

Note that you have to handle mobile views manually.

With search
A work in progress!
The Header.Search component is still in design process! We are working on it and will provide a full-featured component later on.

The Header.Search component is to be used for whole site wide search. Currently HDS recommends putting the SearchIcon inside the Header.ActionBar, and making it open search in separate search page by pressing the search icon. This enables using all needed search functionalities. A code example can be found in the Code page.

Skip To Content
Helsingin kaupunkiHelsingin kaupunki

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.

ActionBarItem
A work in progress!
The Header.ActionBarItem component is subject to change.

The Header.ActionBarItem is a generic component for displaying icon buttons on the action bar, optionally accompanied with dropdowns.

  • The Header.ActionBarItem extends native button element's attributes.
  • The item can be positioned behind a dividing line, setting it apart from the rest of the items with the prop fixedRightPosition. This is mainly reserved for log in button.
  • Please note that under the S breakpoint (576px) the ActionBarItems don't fit in the screen well and hiding them should be considered. We are working on a solution for this.
Helsingin kaupunkiHelsingin kaupunki

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 with navigation menu in Storybook.

With navigation menu

The Header.NavigationMenu enables users to navigate to different pages of the service. The navigation menu supports up to 3 levels of page hierarchy. For more information and recommendations, see also Navigation pattern..

  • The Header.NavigationMenu component should come after the Header.ActionBar component.
  • Keep navigation menu link labels clear and concise. Prefer max 1-2 word long labels. Avoid starting multiple menu link labels with the same word. See also our accessibility notes about navigation menu's hierarchy.
  • Under large sized screens (992px and down) the Header.NavigationMenu is hidden and the contents are moved inside the the Header.ActionBar component's menu.
Helsingin kaupunkiHelsingin kaupunki

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 with navigation menu in Storybook.

Colour variations

Header offers two variations with different backgrounds - one with white and one with black (default) text elements. Use variation that achieves better contrast with the brand background colour of your choice. Header supports also custom theming. Read more at customisation page. When customising colours, refer to colour guidelines to ensure accessibility.

Helsingin kaupunkiHelsingin kaupunki
Helsingin kaupunkiHelsingin kaupunki
Helsingin kaupunkiHelsingin kaupunki

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 with custom theme example in Storybook or toggle the dark theme in full featured story.