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.

A visual rework is coming soon!
The HDS team will be unifying the Navigation component with the Hel.fi project navigation in the near future.

Usage

Example

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. Remember to provide a lang-attribute for each language option to help assistive technology to read the language correctly.
  • 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.

Variations

Default (2 rows)

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.

Small (1 row)

A service can opt to use smaller, 1 row navigation if 2 row 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.

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.

Colour variations

HDS Navigation offers two variations with different background colours - 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.