Navigation
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.
The Navigation component and all of its subcomponents are deprecated and will be removed in the next major release. Upcoming Header component will provide all the existing functionalities with a new look to match hel.fi designs.
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.
Navigation actions
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.