Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosLoading spinnerLogoNavigationPrinciplesAccessibilityUsage and variationsDemos & APINotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Navigation

DraftAccessible

A navigation component is the main way for users to navigate and locate themselves when using a service. It includes some key features present in most services to keep user experience consistent between them.

Principles

  • It is strongly recommended to always include the navigation component in your service.
  • Always position navigation to the top of the page. Keep the navigation in place so the user can always easily locate it. It is recommended to include navigation on every page of the service.
  • Navigation component is built to follow HDS breakpoint tokens. While it is recommended to follow HDS breakpoint tokens, you may alter navigation width to fit your service's needs.
  • Try to keep the order of actions (search, user, language select) consistent in navigation. Do not change the default order without a good reason.
    • If there are less than three available languages and the services navigation is simple, available languages can be listed as links in the action row instead of a language select dropdown for better usability.
  • 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.

Accessibility

  • HDS Navigation is designed to support many different brand colors. When customising colours, refer to colour guidelines to ensure accessibility.
  • When designing a menu link hierarchy, always think about keyboard and screen reader users. First, make sure top-level menu labels are clear, and submenu items contextually fit under it. Next, make sure the menu option order is logical and reasonable. Remember that keyboard users need to manually navigate to each element and thus placing a commonly used menu option last is not optimal.

Usage and variations

Default (2 lines)

The default navigation includes a separate line for navigation menu links. Therefore it is the ideal choice for most services where navigation structure is more complicated.

React code example:

<Navigation
title="Helsinki Design System"
menuToggleAriaLabel="menu"
skipTo="#content"
skipToContentLabel="Skip to content"
>
<Navigation.Row>
<Navigation.Item label="Item" active />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
</Navigation.Row>
</Navigation>

Small (1 line)

A service can opt to use smaller, 1 line navigation if 2 line navigation is too heavy for its purpose. Smaller navigation is optimal for services that do not have a complicated navigation structure (only 1-3 links in navigation) and do not need many navigation features such as search, profile, and language selection.

React code example:

<Navigation
title="Helsinki Design System"
menuToggleAriaLabel="menu"
skipTo="#content"
skipToContentLabel="Skip to content"
>
<Navigation.Row variant="inline">
<Navigation.Item label="Item" active />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
</Navigation.Row>
</Navigation>

Color variations

HDS Navigation offers two variations with different background colors - one with white and one with black text elements. Use variation that achieves better contrast with the brand background colour of your choice. When customising colours, refer to colour guidelines to ensure accessibility.

React code example:

{/* Light (default) */}
<Navigation
title="Helsinki Design System"
menuToggleAriaLabel="menu"
skipTo="#content"
skipToContentLabel="Skip to content"
>
<Navigation.Row variant="inline">
<Navigation.Item label="Item" active />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
</Navigation.Row>
</Navigation>
{/* Dark */}
<Navigation
theme="dark"
title="Helsinki Design System"
menuToggleAriaLabel="menu"
skipTo="#content"
skipToContentLabel="Skip to content"
>
<Navigation.Row variant="inline">
<Navigation.Item label="Item" active />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
</Navigation.Row>
</Navigation>

Custom theme

All the navigation colours can be customised, if the available colour variants don't suit your needs. When customising colours, refer to colour guidelines to ensure accessibility.

React code example:

<Navigation
theme={{
'--header-background-color': 'var(--color-engel)',
}}
title="Helsinki Design System"
menuToggleAriaLabel="menu"
skipTo="#content"
skipToContentLabel="Skip to content"
>
<Navigation.Row variant="inline">
<Navigation.Item label="Item" active />
<Navigation.Item label="Item" />
<Navigation.Item label="Item" />
</Navigation.Row>
</Navigation>

HDS Navigation component supports many commonly used features out of the box. The main navigation bar can be configured to include search, language selection and user profile actions. You may also easily customize the action row with your own actions.

React code example:

<Navigation
title="Helsinki Design System"
menuToggleAriaLabel="menu"
skipTo="#content"
skipToContentLabel="Skip to content"
>
<Navigation.Actions>
<Navigation.Search searchLabel="Search" searchPlaceholder="Search page" />
<Navigation.User label="Sign in" />
<Navigation.LanguageSelector label="FI">
<Navigation.Item label="Suomeksi" />
<Navigation.Item label="På svenska" />
<Navigation.Item label="In English" />
</Navigation.LanguageSelector>
</Navigation.Actions>
</Navigation>

Demos & API

Core

Not included in hds-core!

React

Navigation in hds-react

Navigation API