Navigation

Navigation is used to help the users find content on the site. Navigation is enhanced by the menu bar in the site header, but can also be accomplished through the site footer, site map, a content page or an “A-Ö” page.


The navigation can be structured in one or more levels, depending on the information complexity of the site. The first level of navigation should contain the primary navigation items for the site. Use text based items (links) across the top for the primary navigation level. The first level of navigation should use a maximum of three - four horizontal items. Order items based on popularity. Popular items should be visible on all screen sizes.

For sites that require more items in the first level the hamburger menu can be used to hide less prioritized navigation items, also called a "greedy menu".

Example of greedy menu

greedy-menu-recept-example

The lower levels of navigation should be used with caution. Only add items that users are frequently looking for (or with high traffic) and consider the menu complexity when designing the navigation.

For desktop lower navigation levels can be placed as items in a bar just below the header menu.

If the navigation becomes to complex, direct the users to a content page for navigation to sub sections.

Hamburger menu

The hamburger menu can be used to help the user find the lower levels of navigation, in particular on smaller devices. It is recommended to use the hamburger icon together with the word “Mer” (More). All navigation items and levels should be available from the hamburger menu. The hamburger menu should be expanded by pushing down the site content. When the user makes a selection, the menu disappears. The hamburger menu should not be used alone for the primary level of navigation. Do not rely on users finding important information in the hamburger menu.

Search

The search field must be considered and prioritized when setting up the navigation structure and header menu. See the search/autocomplete section for details.